@extends('layouts.app')
@section('title', 'Analisis Panel Test')
@section('content')

@php
    $sampleColors = ['#3b82f6','#22c55e','#f59e0b','#ef4444','#8b5cf6'];
    $colorsBg     = ['#dbeafe','#dcfce7','#fef3c7','#fee2e2','#ede9fe'];
@endphp

<div class="d-flex justify-content-between align-items-start mb-4">
    <div>
        <h4 class="fw-bold mb-1">{{ $panelTest->title }}</h4>
        <p class="text-muted mb-0">
            {{ $panelTest->product->name }} •
            {{ $panelTest->test_date->format('d M Y') }}
            @if($panelTest->location)• {{ $panelTest->location }}@endif
        </p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('reports.index', ['panel_test_id' => $panelTest->id]) }}"
            class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-bar-chart"></i> Grafik
        </a>
        <a href="{{ route('reports.export', ['panel_test_id' => $panelTest->id]) }}"
            class="btn btn-success btn-sm">
            <i class="bi bi-file-earmark-excel"></i> Export Excel
        </a>
        <button onclick="window.print()" class="btn btn-primary btn-sm">
            <i class="bi bi-printer"></i> Cetak
        </button>
    </div>
</div>

{{-- Header Ringkasan --}}
<div class="card mb-4">
    <div class="card-body">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h5 class="fw-bold mb-3">
                    <i class="bi bi-people text-primary"></i>
                    Jumlah Responden = {{ $totalRespondents }} orang
                </h5>
                <div class="d-flex gap-4">
                    @php
                        $pria   = collect($respondents)->where('gender','Laki-laki')->count();
                        $wanita = collect($respondents)->where('gender','Perempuan')->count();
                        $pctP   = $totalRespondents > 0 ? round($pria/$totalRespondents*100,2) : 0;
                        $pctW   = $totalRespondents > 0 ? round($wanita/$totalRespondents*100,2) : 0;
                    @endphp
                    <div class="text-center p-3 rounded" style="background:#dbeafe;min-width:120px">
                        <div style="font-size:2rem">👨</div>
                        <div class="fw-bold" style="font-size:1.3rem;color:#1d4ed8">{{ $pria }}</div>
                        <small class="text-muted">Laki-laki ({{ $pctP }}%)</small>
                    </div>
                    <div class="text-center p-3 rounded" style="background:#fce7f3;min-width:120px">
                        <div style="font-size:2rem">👩</div>
                        <div class="fw-bold" style="font-size:1.3rem;color:#be185d">{{ $wanita }}</div>
                        <small class="text-muted">Perempuan ({{ $pctW }}%)</small>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                {{-- Chart gender --}}
                <canvas id="genderChart" height="150"></canvas>
            </div>
        </div>
    </div>
</div>

{{-- Perbandingan antar Sampel per Pertanyaan --}}
@foreach($questionGroups as $groupIdx => $group)
<div class="card mb-4">
    <div class="card-header py-3"
        style="background:#1e3a5f;color:#fff">
        <h6 class="mb-0 fw-bold">
            {{ $groupIdx + 1 }}. {{ $group['question_text'] }}
        </h6>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-bordered mb-0" style="font-size:14px">
                <thead>
                    <tr style="background:#f1f5f9">
                        <th style="width:200px">Pilihan Jawaban</th>
                        @foreach($panelTest->samples as $si => $sample)
                        <th class="text-center" style="color:{{ $sampleColors[$si % 5] }}">
                            {{ $sample->name }}
                            @if($sample->code)
                            <br><small class="text-muted fw-normal">{{ $sample->code }}</small>
                            @endif
                        </th>
                        @endforeach
                        @if($panelTest->samples->count() > 1)
                        <th class="text-center" style="color:#7c3aed">🏆 Terbaik</th>
                        @endif
                    </tr>
                </thead>
                <tbody>
                    @foreach($group['choices'] as $choiceIdx => $choice)
                    <tr @if($choiceIdx % 2 === 0) style="background:#fafafa" @endif>
                        <td class="fw-medium">{{ $choice['label'] }}</td>
                        @php $maxPct = 0; $maxSampleName = ''; @endphp
                        @foreach($panelTest->samples as $si => $sample)
                        @php
                            $data    = $choice['data'][$sample->id] ?? ['count'=>0,'pct'=>0];
                            $count   = $data['count'];
                            $pct     = $data['pct'];
                            $bgColor = $sampleColors[$si % 5];
                            if ($pct > $maxPct) { $maxPct = $pct; $maxSampleName = $sample->name; }
                        @endphp
                        <td class="text-center">
                            <div class="fw-bold" style="color:{{ $bgColor }};font-size:15px">
                                {{ $count }}org
                            </div>
                            <div class="small text-muted">({{ $pct }}%)</div>
                            <div class="progress mt-1" style="height:6px;border-radius:3px">
                                <div class="progress-bar"
                                    style="width:{{ $pct }}%;background:{{ $bgColor }}">
                                </div>
                            </div>
                        </td>
                        @endforeach
                        @if($panelTest->samples->count() > 1)
                        <td class="text-center">
                            @if($maxPct > 0 && $maxSampleName)
                            <span class="badge" style="background:#7c3aed;font-size:12px">
                                {{ $maxSampleName }}
                            </span>
                            <div class="small text-muted">{{ $maxPct }}%</div>
                            @endif
                        </td>
                        @endif
                    </tr>
                    @endforeach

                    {{-- Baris total --}}
                    <tr style="background:#f0f9ff;font-weight:600">
                        <td>Total</td>
                        @foreach($panelTest->samples as $si => $sample)
                        <td class="text-center" style="color:{{ $sampleColors[$si % 5] }}">
                            {{ $group['totals'][$sample->id] ?? 0 }} orang
                        </td>
                        @endforeach
                        @if($panelTest->samples->count() > 1)
                        <td></td>
                        @endif
                    </tr>
                </tbody>
            </table>
        </div>

        {{-- Chart perbandingan --}}
        <div class="p-3">
            <canvas id="chart-q{{ $groupIdx }}" height="80"></canvas>
        </div>
    </div>
</div>
@endforeach

{{-- Pertanyaan Umum --}}
@if(count($generalQuestionStats) > 0)
<h5 class="fw-bold mb-3">Pertanyaan Umum</h5>
@foreach($generalQuestionStats as $gi => $stat)
<div class="card mb-3">
    <div class="card-header py-2" style="background:#475569;color:#fff">
        <h6 class="mb-0">{{ $gi + 1 }}. {{ $stat['question'] }}</h6>
    </div>
    <div class="card-body">
        @if($stat['type'] === 'rating')
        <div class="d-flex align-items-center gap-4">
            <div class="text-center">
                <div style="font-size:3rem;font-weight:800;color:#f59e0b">{{ $stat['avg'] }}</div>
                <div>@for($s=1;$s<=5;$s++)<i class="bi bi-star-fill" style="color:{{ $s<=round($stat['avg'])?'#f59e0b':'#d1d5db' }}"></i>@endfor</div>
                <small class="text-muted">{{ $stat['count'] }} jawaban</small>
            </div>
            <div class="flex-grow-1">
                <canvas id="chart-g{{ $gi }}" height="80"></canvas>
            </div>
        </div>
        @else
        <table class="table table-sm table-bordered mb-0">
            <thead class="table-light">
                <tr><th>Pilihan</th><th class="text-center">Jumlah</th><th class="text-center">Persentase</th></tr>
            </thead>
            <tbody>
                @foreach($stat['counts'] as $choice => $count)
                @php $pct = $stat['total'] > 0 ? round($count/$stat['total']*100,2) : 0; @endphp
                <tr>
                    <td>{{ $choice }}</td>
                    <td class="text-center fw-bold">{{ $count }} org</td>
                    <td class="text-center">({{ $pct }}%)</td>
                </tr>
                @endforeach
            </tbody>
        </table>
        @endif
    </div>
</div>
@endforeach
@endif

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Gender chart
new Chart(document.getElementById('genderChart'), {
    type: 'pie',
    data: {
        labels: ['Laki-laki','Perempuan'],
        datasets: [{
            data: [{{ $pria }}, {{ $wanita }}],
            backgroundColor: ['#3b82f6','#ec4899'],
            borderWidth: 2
        }]
    },
    options: { plugins: { legend: { position: 'bottom' } } }
});

// Charts per pertanyaan sampel
@foreach($questionGroups as $groupIdx => $group)
new Chart(document.getElementById('chart-q{{ $groupIdx }}'), {
    type: 'bar',
    data: {
        labels: {!! json_encode(array_column($group['choices'], 'label')) !!},
        datasets: [
            @foreach($panelTest->samples as $si => $sample)
            {
                label: '{{ $sample->name }}',
                data: [
                    @foreach($group['choices'] as $choice)
                    {{ $choice['data'][$sample->id]['count'] ?? 0 }},
                    @endforeach
                ],
                backgroundColor: '{{ $sampleColors[$si % 5] }}',
                borderRadius: 4,
            },
            @endforeach
        ]
    },
    options: {
        responsive: true,
        plugins: { legend: { position: 'top' } },
        scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } }
    }
});
@endforeach

// General question charts
@foreach($generalQuestionStats as $gi => $stat)
@if($stat['type'] === 'rating')
new Chart(document.getElementById('chart-g{{ $gi }}'), {
    type: 'bar',
    data: {
        labels: ['⭐1','⭐⭐2','⭐⭐⭐3','⭐⭐⭐⭐4','⭐⭐⭐⭐⭐5'],
        datasets: [{
            data: [{{ $stat['dist'][1]??0 }},{{ $stat['dist'][2]??0 }},{{ $stat['dist'][3]??0 }},{{ $stat['dist'][4]??0 }},{{ $stat['dist'][5]??0 }}],
            backgroundColor: ['#ef4444','#f97316','#eab308','#22c55e','#3b82f6'],
            borderRadius: 4,
        }]
    },
    options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true } } }
});
@endif
@endforeach
</script>
@endpush

@endsection