@extends('layouts.app')
@section('title', auth()->user()->unit_type === 'marketing' ? 'Laporan Consumer Contact' : 'Laporan Panel Test')
@section('content')

<div class="mb-4">
    <h4 class="fw-bold mb-1">Laporan & Grafik</h4>
    <p class="text-muted mb-0">{{ auth()->user()->unit_type === 'marketing' ? 'Analisis hasil consumer contact' : 'Analisis hasil panel test' }}</p>
</div>

<div class="row g-3">

    {{-- KOLOM KIRI: Daftar Panel Test --}}
    <div class="col-lg-4">
        <div class="card h-100">
            <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                <h6 class="fw-bold mb-0">
                    <i class="bi bi-clipboard-data text-primary"></i> {{ auth()->user()->unit_type === 'marketing' ? 'Daftar Consumer Contact' : 'Daftar Panel Test' }}
                </h6>
                <span class="badge bg-primary">{{ $panelTests->count() }}</span>
            </div>
            <div class="px-3 pt-3">
                <input type="text" id="searchPanelTest" class="form-control form-control-sm"
                    placeholder="🔍 Cari panel test..."
                    oninput="filterPanelTests(this.value)">
            </div>
            <div class="card-body p-0 pt-2"
                style="overflow-y:auto;max-height:calc(100vh - 280px)">
                <div id="panelTestList">
                    @forelse($panelTests as $test)
                    <a href="{{ route('reports.index', ['panel_test_id' => $test->id]) }}"
                        class="d-block text-decoration-none px-3 py-3 border-bottom panel-test-item
                        {{ $panelTestId == $test->id ? 'bg-primary bg-opacity-10' : '' }}"
                        style="transition:background .15s"
                        data-title="{{ strtolower($test->title) }}"
                        data-number="{{ strtolower($test->test_number ?? '') }}">
                        <div class="d-flex align-items-start gap-2">
                            <div class="flex-shrink-0 mt-1">
                                <span class="badge status-{{ $test->status }}" style="font-size:10px">
                                    {{ ucfirst($test->status) }}
                                </span>
                            </div>
                            <div class="flex-grow-1 min-width-0">
                                <div class="fw-semibold text-dark"
                                    style="font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
                                    {{ $test->title }}
                                </div>
                                @if($test->test_number)
                                <code style="font-size:10px;color:#1e3a5f">{{ $test->test_number }}</code>
                                @endif
                                <div class="text-muted" style="font-size:11px">
                                    {{ $test->product->name }} • {{ $test->test_date->format('d M Y') }}
                                </div>
                                <div class="d-flex gap-1 mt-1 flex-wrap">
                                    @if($test->type === 'internal')
                                    <span class="badge bg-info text-dark" style="font-size:9px">🏢 Internal</span>
                                    @elseif($test->type === 'public')
                                    <span class="badge bg-success" style="font-size:9px">🌐 Publik</span>
                                    @else
                                    <span class="badge bg-secondary" style="font-size:9px">🗺️ Regional</span>
                                    @endif
                                    <span class="badge bg-light text-dark" style="font-size:9px">
                                        {{ $test->testSessions->where('status','completed')->count() }} responden
                                    </span>
                                </div>
                            </div>
                            @if($panelTestId == $test->id)
                            <i class="bi bi-chevron-right text-primary flex-shrink-0 mt-1"></i>
                            @endif
                        </div>
                    </a>
                    @empty
                    <div class="text-center text-muted py-4 px-3">
                        <i class="bi bi-clipboard-x d-block fs-3 mb-2"></i>
                        {{ auth()->user()->unit_type === 'marketing' ? 'Belum ada consumer contact aktif' : 'Belum ada panel test aktif' }}
                    </div>
                    @endforelse
                </div>
                <div id="noResults" class="text-center text-muted py-4 px-3" style="display:none">
                    <i class="bi bi-search d-block fs-3 mb-2"></i>
                    Tidak ditemukan
                </div>
            </div>
        </div>
    </div>

    {{-- KOLOM KANAN: Detail Laporan --}}
    <div class="col-lg-8">
        @if($report)

        {{-- Header laporan --}}
        <div class="card mb-3 border-0"
            style="background:linear-gradient(135deg,#1e3a5f,#2563eb);color:#fff">
            <div class="card-body p-4">
                <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
                    <div>
                        @if($report['panelTest']->test_number)
                        <code style="background:rgba(255,255,255,.2);color:#fff;padding:2px 10px;border-radius:12px;font-size:12px">
                            {{ $report['panelTest']->test_number }}
                        </code>
                        @endif
                        <h5 class="fw-bold mb-1 mt-1">{{ $report['panelTest']->title }}</h5>
                        <div class="d-flex gap-3 flex-wrap" style="font-size:13px;opacity:.85">
                            <span><i class="bi bi-box-seam"></i> {{ $report['panelTest']->product->name }}</span>
                            <span><i class="bi bi-calendar3"></i> {{ $report['panelTest']->test_date->format('d M Y') }}</span>
                            @if($report['panelTest']->location)
                            <span><i class="bi bi-geo-alt"></i> {{ $report['panelTest']->location }}</span>
                            @endif
                        </div>
                    </div>
                    <div class="d-flex gap-2 flex-wrap">
                        <form method="GET" action="{{ route('reports.index') }}"
                            class="d-flex gap-2" id="filterForm">
                            <input type="hidden" name="panel_test_id" value="{{ $panelTestId }}">
                            <select name="spg_id" class="form-select form-select-sm"
                                style="min-width:140px;background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3)"
                                onchange="document.getElementById('filterForm').submit()">
                                <option value="" style="color:#000">{{ isset($report) && $report['panelTest']->unit_type === 'divisi' ? '-- Semua Surveyor --' : '-- Semua SPG --' }}</option>
                                @foreach($report['spgList'] as $spg)
                                <option value="{{ $spg->id }}" style="color:#000"
                                    {{ $spgFilter == $spg->id ? 'selected' : '' }}>
                                    {{ $spg->name }}
                                </option>
                                @endforeach
                            </select>
                        </form>
                        <a href="{{ route('reports.export', ['panel_test_id' => $panelTestId, 'spg_id' => $spgFilter]) }}"
                            class="btn btn-success btn-sm">
                            <i class="bi bi-file-earmark-excel"></i> Excel
                        </a>
                        <a href="{{ route('reports.analisis', ['panel_test_id' => $panelTestId]) }}"
                            class="btn btn-warning btn-sm text-dark">
                            <i class="bi bi-bar-chart-line"></i> Analisis
                        </a>
                    </div>
                </div>
            </div>
        </div>

        {{-- Summary Cards --}}
        <div class="row g-2 mb-3">
            <div class="col-6 col-md-3">
                <div class="card text-center p-3 border-0 shadow-sm">
                    <div class="text-muted small mb-1">Total Responden</div>
                    <div class="fw-bold" style="font-size:1.8rem;color:#1e3a5f">
                        {{ $report['totalRespondents'] }}
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card text-center p-3 border-0 shadow-sm">
                    <div class="text-muted small mb-1">{{ isset($report) && $report['panelTest']->unit_type === 'divisi' ? 'Total Surveyor' : 'Total SPG' }}</div>
                    <div class="fw-bold" style="font-size:1.8rem;color:#059669">
                        {{ $report['spgList']->count() }}
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card text-center p-3 border-0 shadow-sm">
                    <div class="text-muted small mb-1">Avg Rating</div>
                    @php
                        $ratingStats = $report['questionStats']->where('type','rating');
                        $avgAll = $ratingStats->count() > 0
                            ? number_format($ratingStats->avg('avg'), 1) : '-';
                    @endphp
                    <div class="fw-bold" style="font-size:1.8rem;color:#d97706">{{ $avgAll }}</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card text-center p-3 border-0 shadow-sm">
                    <div class="text-muted small mb-1">Sampel</div>
                    <div class="fw-bold" style="font-size:1.8rem;color:#7c3aed">
                        {{ $report['panelTest']->samples->count() }}
                    </div>
                </div>
            </div>
        </div>

        {{-- Overview Charts --}}
        <div class="row g-3 mb-3">
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-header bg-white py-2 border-bottom">
                        <h6 class="fw-semibold mb-0 small">
                            <i class="bi bi-gender-ambiguous text-primary"></i> Gender
                        </h6>
                    </div>
                    <div class="card-body d-flex align-items-center justify-content-center p-2">
                        @php
                            $lakiLaki  = collect($report['respondents'])->where('gender','Laki-laki')->count();
                            $perempuan = collect($report['respondents'])->where('gender','Perempuan')->count();
                        @endphp
                        <canvas id="genderChart" height="160"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-header bg-white py-2 border-bottom">
                        <h6 class="fw-semibold mb-0 small">
                            <i class="bi bi-people text-success"></i> Per {{ isset($report) && $report['panelTest']->unit_type === 'divisi' ? 'Surveyor' : 'SPG' }}
                        </h6>
                    </div>
                    <div class="card-body d-flex align-items-center justify-content-center p-2">
                        <canvas id="spgChart" height="160"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-header bg-white py-2 border-bottom">
                        <h6 class="fw-semibold mb-0 small">
                            <i class="bi bi-people text-warning"></i> Generasi
                        </h6>
                    </div>
                    <div class="card-body d-flex align-items-center justify-content-center p-2">
                        @php
                            $genData = collect($report['respondents'])
                                ->groupBy('generation')
                                ->map->count()
                                ->sortDesc();
                        @endphp
                        <canvas id="genChart" height="160"></canvas>
                    </div>
                </div>
            </div>
        </div>

        {{-- Rekap per SPG --}}
        <div class="card mb-3 border-0 shadow-sm">
            <div class="card-header bg-white py-3">
                <h6 class="fw-bold mb-0">
                    <i class="bi bi-people text-primary"></i> Rekap per {{ isset($report) && $report['panelTest']->unit_type === 'divisi' ? 'Surveyor' : 'SPG' }}
                </h6>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0" style="font-size:13px">
                        <thead class="table-light">
                            <tr>
                                <th>#</th>
                                <th>Nama {{ isset($report) && $report['panelTest']->unit_type === 'divisi' ? 'Surveyor' : 'SPG' }}</th>
                                <th class="text-center">Responden</th>
                                <th class="text-center">Avg Rating</th>
                                <th>Detail</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($report['spgStats'] as $i => $stat)
                            <tr>
                                <td>{{ $i + 1 }}</td>
                                <td>
                                    <div class="d-flex align-items-center gap-2">
                                        <div style="width:28px;height:28px;background:#dbeafe;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#1d4ed8">
                                            {{ strtoupper(substr($stat['spg']->name, 0, 1)) }}
                                        </div>
                                        <span class="fw-medium">{{ $stat['spg']->name }}</span>
                                    </div>
                                </td>
                                <td class="text-center">
                                    <span class="badge bg-primary">{{ $stat['total'] }}</span>
                                </td>
                                <td class="text-center">
                                    @if($stat['avg_rating'] > 0)
                                    <span class="badge bg-warning text-dark">⭐ {{ $stat['avg_rating'] }}</span>
                                    @else
                                    <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary py-0"
                                        data-bs-toggle="collapse"
                                        data-bs-target="#spg-{{ $i }}">
                                        {{ $stat['total'] }} responden
                                    </button>
                                    <div class="collapse mt-1" id="spg-{{ $i }}">
                                        <table class="table table-sm table-bordered mb-0"
                                            style="font-size:11px">
                                            <thead class="table-light">
                                                <tr>
                                                    <th>#</th>
                                                    <th>Nama</th>
                                                    @if($report['panelTest']->type === 'internal')
                                                    <th>Perner</th>
                                                    @else
                                                    <th>Area Promotion</th>
                                                    <th>SP</th>
                                                    @endif
                                                    <th>Generasi</th>
                                                    <th>Gender</th>
                                                    <th>Jam</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($stat['respondents'] as $ri => $resp)
                                                <tr>
                                                    <td>{{ $ri + 1 }}</td>
                                                    <td>{{ $resp['name'] ?? '-' }}</td>
                                                    @if($report['panelTest']->type === 'internal')
                                                    <td>
                                                        <code style="font-size:10px">
                                                            {{ $resp['perner'] ?? '-' }}
                                                        </code>
                                                    </td>
                                                    @else
                                                    <td><small>{{ $resp['area_promotion_name'] ?? '-' }}</small></td>
                                                    <td><small>{{ $resp['sp_name'] ?? '-' }}</small></td>
                                                    @endif
                                                    <td>{{ $resp['generation'] ?? '-' }}</td>
                                                    <td>{{ $resp['gender'] ?? '-' }}</td>
                                                    <td>{{ $resp['time'] ? $resp['time']->format('H:i') : '-' }}</td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- Grafik per Pertanyaan --}}
        <h6 class="fw-bold mb-2">
            <i class="bi bi-bar-chart-line text-primary"></i> Grafik Hasil
            @if($spgFilter)
            <span class="badge bg-info text-dark ms-1" style="font-size:11px">
                Filter: {{ $report['spgList']->firstWhere('id', $spgFilter)?->name }}
            </span>
            @endif
        </h6>

        <div class="row g-3 mb-3">
            @foreach($report['questionStats'] as $i => $stat)
            <div class="col-12">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white py-2 d-flex align-items-center gap-2">
                        <div style="width:24px;height:24px;background:#1e3a5f;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;flex-shrink:0">
                            {{ $i + 1 }}
                        </div>
                        <h6 class="mb-0 fw-semibold flex-grow-1" style="font-size:13px">
                            {{ $stat['question'] }}
                        </h6>
                        <span class="badge" style="background:#e2e8f0;color:#475569;font-size:10px">
                            {{ $stat['type'] }}
                        </span>
                    </div>
                    <div class="card-body py-3">
                        @if($stat['type'] === 'rating')
                        <div class="row align-items-center">
                            <div class="col-3 text-center">
                                <div style="font-size:2.5rem;font-weight:800;color:#f59e0b;line-height:1">
                                    {{ $stat['avg'] }}
                                </div>
                                <div class="my-1" style="font-size:12px">
                                    @for($s = 1; $s <= 5; $s++)
                                    <i class="bi bi-star-fill {{ $s <= round($stat['avg']) ? 'text-warning' : 'text-muted' }}"></i>
                                    @endfor
                                </div>
                                <small class="text-muted">{{ $stat['count'] }} jawaban</small>
                            </div>
                            <div class="col-5">
                                <canvas id="bar{{ $i }}" height="120"></canvas>
                            </div>
                            <div class="col-4">
                                <canvas id="pie{{ $i }}" height="120"></canvas>
                            </div>
                        </div>

                        @elseif($stat['type'] === 'yes_no')
                        @php
                            $ya    = $stat['answers']->filter(fn($a) => $a === 'Ya')->count();
                            $tidak = $stat['answers']->filter(fn($a) => $a === 'Tidak')->count();
                            $total = $ya + $tidak;
                        @endphp
                        <div class="row align-items-center">
                            <div class="col-4">
                                <canvas id="bar{{ $i }}" height="150"></canvas>
                            </div>
                            <div class="col-8">
                                <div class="mb-2">
                                    <div class="d-flex justify-content-between mb-1" style="font-size:13px">
                                        <span>👍 Ya</span>
                                        <strong>{{ $ya }} ({{ $total > 0 ? round($ya/$total*100) : 0 }}%)</strong>
                                    </div>
                                    <div class="progress" style="height:10px;border-radius:5px">
                                        <div class="progress-bar bg-success"
                                            style="width:{{ $total > 0 ? $ya/$total*100 : 0 }}%"></div>
                                    </div>
                                </div>
                                <div>
                                    <div class="d-flex justify-content-between mb-1" style="font-size:13px">
                                        <span>👎 Tidak</span>
                                        <strong>{{ $tidak }} ({{ $total > 0 ? round($tidak/$total*100) : 0 }}%)</strong>
                                    </div>
                                    <div class="progress" style="height:10px;border-radius:5px">
                                        <div class="progress-bar bg-danger"
                                            style="width:{{ $total > 0 ? $tidak/$total*100 : 0 }}%"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        @elseif($stat['type'] === 'multiple_choice')
                        @php $counts = $stat['answers']->countBy(); @endphp
                        <div class="row">
                            <div class="col-7">
                                <canvas id="bar{{ $i }}" height="100"></canvas>
                            </div>
                            <div class="col-5">
                                <canvas id="pie{{ $i }}" height="100"></canvas>
                            </div>
                        </div>

                        @else
                        <div style="max-height:150px;overflow-y:auto">
                            @forelse($stat['answers'] as $ans)
                            <div class="p-2 mb-1 rounded"
                                style="background:#f8fafc;border-left:3px solid #1e3a5f;font-size:13px">
                                {{ $ans }}
                            </div>
                            @empty
                            <p class="text-muted text-center small">Belum ada jawaban</p>
                            @endforelse
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        {{-- ===== TABEL DETAIL RESPONDEN ===== --}}
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                <h6 class="fw-bold mb-0">
                    <i class="bi bi-table"></i> Detail Responden
                </h6>
                <span class="badge bg-primary">{{ $report['totalRespondents'] }} data</span>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0" style="font-size:12px">
                        <thead class="table-light">
                            <tr>
                                <th>#</th>
                                @if($report['panelTest']->type === 'internal')
                                <th>Perner</th>
                                @else
                                <th>SPG</th>
                                <th>Area Office</th>
                                <th>Area Promotion</th>
                                <th>SP</th>
                                @endif
                                <th>Nama Responden</th>
                                <th>Generasi</th>
                                <th>Gender</th>
                                <th>Sesi</th>
                                <th>Waktu</th>
                                <th class="text-center">Detail</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($report['respondents'] as $i => $r)
                            <tr>
                                <td>{{ $i + 1 }}</td>
                                @if($report['panelTest']->type === 'internal')
                                <td>
                                    <code style="font-size:11px;color:#1e3a5f">
                                        {{ $r['perner'] ?? '-' }}
                                    </code>
                                </td>
                                @else
                                <td>
                                    <span class="badge"
                                        style="background:#dbeafe;color:#1d4ed8;font-size:10px">
                                        {{ $r['spg_name'] ?? '-' }}
                                    </span>
                                </td>
                                <td><small>{{ $r['area_office'] ?? '-' }}</small></td>
                                <td><small>{{ $r['area_promotion_name'] ?? '-' }}</small></td>
                                <td><small>{{ $r['sp_name'] ?? '-' }}</small></td>
                                @endif
                                <td class="fw-medium">{{ $r['name'] ?? '-' }}</td>
                                <td>
                                    @if(!empty($r['generation']))
                                    @php
                                        $gc = match($r['generation']) {
                                            'Baby Boomers'     => ['bg'=>'#fef3c7','c'=>'#92400e'],
                                            'Gen X'            => ['bg'=>'#e0e7ff','c'=>'#3730a3'],
                                            'Milenial / Gen Y' => ['bg'=>'#dcfce7','c'=>'#166534'],
                                            'Gen Z'            => ['bg'=>'#ede9fe','c'=>'#5b21b6'],
                                            'Gen Alpha'        => ['bg'=>'#fce7f3','c'=>'#9d174d'],
                                            default            => ['bg'=>'#f1f5f9','c'=>'#64748b'],
                                        };
                                    @endphp
                                    <span class="badge"
                                        style="background:{{ $gc['bg'] }};color:{{ $gc['c'] }};font-size:10px">
                                        {{ $r['generation'] }}
                                    </span>
                                    @else
                                    <span class="text-muted small">-</span>
                                    @endif
                                </td>
                                <td>{{ $r['gender'] ?? '-' }}</td>
                                <td>
                                    <span class="badge bg-light text-dark" style="font-size:10px">
                                        #{{ $r['session'] }}
                                    </span>
                                </td>
                                <td>
                                    <small>
                                        {{ $r['completed_at'] ? $r['completed_at']->format('d M Y, H:i') : '-' }}
                                    </small>
                                </td>
                                <td class="text-center">
                                    <button class="btn btn-sm btn-outline-info py-0 px-2"
                                        data-bs-toggle="collapse"
                                        data-bs-target="#answers-{{ $i }}"
                                        style="font-size:11px">
                                        <i class="bi bi-chat-left-text"></i>
                                    </button>
                                </td>
                            </tr>

                            {{-- ===== DETAIL ROW ===== --}}
                            <tr class="table-light">
                                <td colspan="12" class="p-0">
                                    <div class="collapse" id="answers-{{ $i }}">
                                        <div class="p-3">

                                            {{-- Data Marketing --}}
                                            @php
                                                $hasMarketing = !empty($r['brand_aktivasi'])
                                                    && $r['brand_aktivasi'] !== '-';
                                            @endphp
                                            @if($hasMarketing)
                                            <div class="mb-3 p-3 rounded-3"
                                                style="background:#eef2ff;border:1px solid #c7d2fe">
                                                <div class="fw-bold mb-2"
                                                    style="color:#3730a3;font-size:12px">
                                                    <i class="bi bi-bar-chart-fill"></i>
                                                    Data Konsumen & Marketing
                                                </div>
                                                <div class="row g-2" style="font-size:11px">
                                                    @foreach([
                                                        'Brand Aktivasi'          => $r['brand_aktivasi'] ?? '-',
                                                        'Gender Konsumen'         => $r['konsumen_gender'] ?? '-',
                                                        'Usia Konsumen'           => $r['konsumen_usia'] ?? '-',
                                                        'Profesi'                 => $r['konsumen_profesi'] ?? '-',
                                                        'Pengeluaran RT'          => $r['konsumen_pengeluaran'] ?? '-',
                                                        'Funnel'                  => $r['konsumen_funnel'] ?? '-',
                                                        'Alasan Tdk Konversi'     => $r['alasan_tidak_konversi'] ?? '-',
                                                        'Sumber Tahu Produk'      => $r['sumber_tahu_produk'] ?? '-',
                                                        'Sumber Lainnya'          => $r['sumber_tahu_produk_other'] ?? '-',
                                                        'Brand Kompetitor'        => $r['brand_kompetitor'] ?? '-',
                                                        'Kompetitor Lainnya'      => $r['brand_kompetitor_other'] ?? '-',
                                                        'Alasan Pakai Kompetitor' => $r['alasan_kompetitor'] ?? '-',
                                                    ] as $label => $val)
                                                    @if($val && $val !== '-')
                                                    <div class="col-md-4">
                                                        <div class="text-muted" style="font-size:10px">{{ $label }}</div>
                                                        <div class="fw-semibold" style="color:#4338ca">{{ $val }}</div>
                                                    </div>
                                                    @endif
                                                    @endforeach
                                                </div>
                                            </div>
                                            @endif

                                            {{-- Data Lokasi --}}
                                            @if(!empty($r['provinsi']) && $r['provinsi'] !== '-')
                                            <div class="mb-3 p-3 rounded-3"
                                                style="background:#eff6ff;border:1px solid #bfdbfe">
                                                <div class="fw-bold mb-2"
                                                    style="color:#1d4ed8;font-size:12px">
                                                    <i class="bi bi-geo-alt-fill"></i>
                                                    Data Lokasi Contact
                                                </div>
                                                <div class="row g-2" style="font-size:11px">
                                                    @foreach([
                                                        'Area Promotion' => $r['area_promotion_name'] ?? '-',
                                                        'SP'             => $r['sp_name'] ?? '-',
                                                        'Provinsi'       => $r['provinsi'] ?? '-',
                                                        'Kota/Kab'       => $r['kota'] ?? '-',
                                                        'Kecamatan'      => $r['kecamatan'] ?? '-',
                                                        'Kelurahan'      => $r['kelurahan'] ?? '-',
                                                        'Keterangan'     => $r['description'] ?? '-',
                                                    ] as $label => $val)
                                                    @if($val && $val !== '-')
                                                    <div class="col-md-4">
                                                        <div class="text-muted" style="font-size:10px">{{ $label }}</div>
                                                        <div class="fw-semibold">{{ $val }}</div>
                                                    </div>
                                                    @endif
                                                    @endforeach
                                                </div>
                                            </div>
                                            @endif

                                            {{-- Jawaban pertanyaan --}}
                                            @if(!empty($r['answers']))
                                            <table class="table table-sm table-bordered mb-0"
                                                style="font-size:12px;background:#fff">
                                                <thead style="background:#f1f5f9">
                                                    <tr>
                                                        <th width="30">#</th>
                                                        <th>Pertanyaan</th>
                                                        <th>Jawaban</th>
                                                        <th>Catatan</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach($r['answers'] as $ai => $ans)
                                                    <tr>
                                                        <td>{{ $ai + 1 }}</td>
                                                        <td>{{ $ans['question'] }}</td>
                                                        <td>
                                                            @if($ans['type'] === 'rating')
                                                            <span class="text-warning">
                                                                @for($s=1;$s<=$ans['value'];$s++)⭐@endfor
                                                                ({{ $ans['value'] }})
                                                            </span>
                                                            @else
                                                            {{ $ans['value'] ?? '-' }}
                                                            @endif
                                                        </td>
                                                        <td class="text-muted fst-italic small">
                                                            {{ $ans['note'] ?: '-' }}
                                                        </td>
                                                    </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                            @endif

                                        </div>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="12" class="text-center py-4 text-muted">
                                    Belum ada data responden
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        @push('scripts')
        <script>
        const pieColors = ['#3b82f6','#22c55e','#f59e0b','#ef4444','#8b5cf6','#06b6d4','#ec4899'];

        // Gender Chart
        new Chart(document.getElementById('genderChart'), {
            type: 'pie',
            data: {
                labels: ['Laki-laki','Perempuan'],
                datasets: [{
                    data: [{{ $lakiLaki }},{{ $perempuan }}],
                    backgroundColor: ['#3b82f6','#ec4899'],
                    borderWidth: 2
                }]
            },
            options: { plugins: { legend: { position:'bottom', labels:{ font:{ size:11 } } } } }
        });

        // SPG Chart
        new Chart(document.getElementById('spgChart'), {
            type: 'pie',
            data: {
                labels: {!! json_encode($report['spgStats']->pluck('spg')->pluck('name')->values()) !!},
                datasets: [{
                    data: {!! json_encode($report['spgStats']->pluck('total')->values()) !!},
                    backgroundColor: pieColors,
                    borderWidth: 2
                }]
            },
            options: { plugins: { legend: { position:'bottom', labels:{ font:{ size:11 } } } } }
        });

        // Generasi Chart
        new Chart(document.getElementById('genChart'), {
            type: 'pie',
            data: {
                labels: {!! json_encode($genData->keys()->values()) !!},
                datasets: [{
                    data: {!! json_encode($genData->values()) !!},
                    backgroundColor: ['#fbbf24','#60a5fa','#34d399','#a78bfa','#f87171'],
                    borderWidth: 2
                }]
            },
            options: { plugins: { legend: { position:'bottom', labels:{ font:{ size:11 } } } } }
        });

        // Charts per pertanyaan
        @foreach($report['questionStats'] as $i => $stat)
            @if($stat['type'] === 'rating')
            new Chart(document.getElementById('bar{{ $i }}'), {
                type: 'bar',
                data: {
                    labels: ['⭐1','⭐⭐2','⭐⭐⭐3','⭐⭐⭐⭐4','⭐⭐⭐⭐⭐5'],
                    datasets: [{
                        data: [
                            {{ $stat['distribution'][1]??0 }},
                            {{ $stat['distribution'][2]??0 }},
                            {{ $stat['distribution'][3]??0 }},
                            {{ $stat['distribution'][4]??0 }},
                            {{ $stat['distribution'][5]??0 }}
                        ],
                        backgroundColor: ['#ef4444','#f97316','#eab308','#22c55e','#3b82f6'],
                        borderRadius: 4,
                    }]
                },
                options: {
                    responsive: true,
                    plugins: { legend: { display: false } },
                    scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } }
                }
            });
            new Chart(document.getElementById('pie{{ $i }}'), {
                type: 'pie',
                data: {
                    labels: ['1','2','3','4','5'],
                    datasets: [{
                        data: [
                            {{ $stat['distribution'][1]??0 }},
                            {{ $stat['distribution'][2]??0 }},
                            {{ $stat['distribution'][3]??0 }},
                            {{ $stat['distribution'][4]??0 }},
                            {{ $stat['distribution'][5]??0 }}
                        ],
                        backgroundColor: ['#ef4444','#f97316','#eab308','#22c55e','#3b82f6'],
                        borderWidth: 2
                    }]
                },
                options: { plugins: { legend: { position:'bottom', labels:{ font:{ size:10 } } } } }
            });

            @elseif($stat['type'] === 'yes_no')
            @php
                $ya    = $stat['answers']->filter(fn($a) => $a === 'Ya')->count();
                $tidak = $stat['answers']->filter(fn($a) => $a === 'Tidak')->count();
            @endphp
            new Chart(document.getElementById('bar{{ $i }}'), {
                type: 'pie',
                data: {
                    labels: ['Ya','Tidak'],
                    datasets: [{
                        data: [{{ $ya }},{{ $tidak }}],
                        backgroundColor: ['#22c55e','#ef4444'],
                        borderWidth: 2
                    }]
                },
                options: { plugins: { legend: { position:'bottom', labels:{ font:{ size:11 } } } } }
            });

            @elseif($stat['type'] === 'multiple_choice')
            @php $counts = $stat['answers']->countBy(); @endphp
            new Chart(document.getElementById('bar{{ $i }}'), {
                type: 'bar',
                data: {
                    labels: {!! json_encode($counts->keys()->values()) !!},
                    datasets: [{
                        label: 'Jumlah',
                        data: {!! json_encode($counts->values()->values()) !!},
                        backgroundColor: '#3b82f6',
                        borderRadius: 4
                    }]
                },
                options: {
                    responsive: true,
                    plugins: { legend: { display: false } },
                    scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } }
                }
            });
            new Chart(document.getElementById('pie{{ $i }}'), {
                type: 'pie',
                data: {
                    labels: {!! json_encode($counts->keys()->values()) !!},
                    datasets: [{
                        data: {!! json_encode($counts->values()->values()) !!},
                        backgroundColor: pieColors,
                        borderWidth: 2
                    }]
                },
                options: { plugins: { legend: { position:'bottom', labels:{ font:{ size:10 } } } } }
            });
            @endif
        @endforeach
        </script>
        @endpush

        @else
        {{-- Belum pilih panel test --}}
        <div class="card border-0 shadow-sm h-100 d-flex align-items-center justify-content-center"
            style="min-height:400px">
            <div class="text-center py-5 text-muted">
                <i class="bi bi-bar-chart fs-1 d-block mb-3"></i>
                <h5>{{ auth()->user()->unit_type === 'marketing' ? 'Pilih consumer contact di sebelah kiri' : 'Pilih panel test di sebelah kiri' }}</h5>
                <p class="small">untuk melihat laporan, grafik, dan analisis</p>
            </div>
        </div>
        @endif

    </div>
</div>

<script>
function filterPanelTests(keyword) {
    const items   = document.querySelectorAll('.panel-test-item');
    const noRes   = document.getElementById('noResults');
    const kw      = keyword.toLowerCase().trim();
    let   visible = 0;
    items.forEach(item => {
        const match = (item.dataset.title || '').includes(kw)
            || (item.dataset.number || '').includes(kw);
        item.style.display = match ? 'block' : 'none';
        if (match) visible++;
    });
    noRes.style.display = visible === 0 ? 'block' : 'none';
}
</script>
@endsection