@extends('admin.layouts.app')

@section('title', 'Dashboard')

@push('head')
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.4/chart.umd.min.js"></script> -->
 <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
@endpush

@section('content')
<div class="topbar">
    <div>
        <h1>Dashboard</h1>
        <p>Ringkasan hasil kuisioner intensi penggunaan layanan home care.</p>
    </div>
    <a href="{{ route('admin.responden.export') }}" class="btn btn-secondary">⬇ Ekspor Rekap CSV</a>
</div>

{{-- ================= KPI ================= --}}
<div class="grid grid-4">
    <div class="card kpi-card">
        <div class="kpi-label">Total Responden</div>
        <div class="kpi-value">{{ $totalResponden }}</div>
        <div class="kpi-foot">Seluruh entri (lolos + gagal saringan)</div>
    </div>
    <div class="card kpi-card">
        <div class="kpi-label">Memenuhi Syarat</div>
        <div class="kpi-value">{{ $memenuhiSyarat }} <small>/ {{ $totalResponden }}</small></div>
        <div class="kpi-foot">{{ $totalResponden ? number_format($memenuhiSyarat / $totalResponden * 100, 1) : 0 }}% dari total entri</div>
    </div>
    <div class="card kpi-card">
        <div class="kpi-label">Rata-rata Skor Kuisioner</div>
        <div class="kpi-value">{{ $rataRataKeseluruhan ? number_format($rataRataKeseluruhan, 2) : '-' }} <small>/ 5</small></div>
        <div class="kpi-foot">Skala 1&ndash;5, sudah memperhitungkan arah positif/negatif</div>
    </div>
    <div class="card kpi-card">
        <div class="kpi-label">Rata-rata Waktu Pengisian</div>
        <div class="kpi-value">{{ $rataRataDurasiMenit ? number_format($rataRataDurasiMenit, 1) : '-' }} <small>menit</small></div>
        <div class="kpi-foot">Untuk responden yang menyelesaikan kuisioner</div>
    </div>
</div>

{{-- ================= TREN ================= --}}
<div class="section-title">Tren Pengisian Kuisioner (14 Hari Terakhir)</div>
<div class="card">
    <canvas id="chartTren" height="70"></canvas>
</div>

{{-- ================= SKOR: DIMENSI & POSITIF-NEGATIF ================= --}}
<div class="section-title">Skor Kuisioner</div>
<div class="grid grid-2">
    <div class="card">
        <h2>Rata-rata Skor per Dimensi</h2>
        <p class="card-sub">Skala 1 (sangat rendah) &ndash; 5 (sangat tinggi), arah skor negatif sudah dibalik</p>
        <canvas id="chartDimensi" height="230"></canvas>
    </div>
    <div class="card">
        <h2>Pernyataan Positif vs Negatif</h2>
        <p class="card-sub">Perbandingan rata-rata skor berdasarkan arah pernyataan</p>
        <canvas id="chartPosNeg" height="230"></canvas>
    </div>
</div>

{{-- ================= INSIGHT TERTINGGI/TERENDAH ================= --}}
<div class="grid grid-2" style="margin-top:20px;">
    <div class="card">
        <h2>🏆 5 Pernyataan Skor Tertinggi</h2>
        <p class="card-sub">Aspek yang paling didukung responden</p>
        @foreach ($soalTertinggi as $s)
            <div class="qual-item">
                <div class="qual-q">{{ $s->kode_soal }} &middot; {{ $s->dimensi }} &middot; <span class="badge {{ $s->jenis_pernyataan === 'Positif' ? 'badge-positif' : 'badge-negatif' }}">{{ $s->jenis_pernyataan }}</span></div>
                <div class="qual-a">{{ $s->teks_pertanyaan }}</div>
                <div class="qual-meta">Rata-rata skor: <strong>{{ number_format($s->rata_rata, 2) }}</strong> ({{ $s->jumlah_jawaban }} jawaban)</div>
            </div>
        @endforeach
    </div>
    <div class="card">
        <h2>⚠️ 5 Pernyataan Skor Terendah</h2>
        <p class="card-sub">Aspek yang perlu menjadi perhatian</p>
        @foreach ($soalTerendah as $s)
            <div class="qual-item">
                <div class="qual-q">{{ $s->kode_soal }} &middot; {{ $s->dimensi }} &middot; <span class="badge {{ $s->jenis_pernyataan === 'Positif' ? 'badge-positif' : 'badge-negatif' }}">{{ $s->jenis_pernyataan }}</span></div>
                <div class="qual-a">{{ $s->teks_pertanyaan }}</div>
                <div class="qual-meta">Rata-rata skor: <strong>{{ number_format($s->rata_rata, 2) }}</strong> ({{ $s->jumlah_jawaban }} jawaban)</div>
            </div>
        @endforeach
    </div>
</div>

{{-- ================= TABEL PER SOAL ================= --}}
<div class="section-title">Nilai per Soal ({{ $perSoal->count() }} pertanyaan)</div>
<div class="card">
    <div class="table-wrap">
        <table class="data-table" id="tabelPerSoal">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Kode</th>
                    <th>Dimensi</th>
                    <th>Jenis</th>
                    <th style="min-width:260px;">Teks Pertanyaan</th>
                    <th class="num">Rata-rata</th>
                    <th style="min-width:120px;">&nbsp;</th>
                    <th class="num">SS</th>
                    <th class="num">S</th>
                    <th class="num">N</th>
                    <th class="num">TS</th>
                    <th class="num">STS</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($perSoal as $s)
                    <tr>
                        <td>{{ $s->urutan }}</td>
                        <td><strong>{{ $s->kode_soal }}</strong></td>
                        <td>{{ $s->dimensi }}</td>
                        <td><span class="badge {{ $s->jenis_pernyataan === 'Positif' ? 'badge-positif' : 'badge-negatif' }}">{{ $s->jenis_pernyataan }}</span></td>
                        <td class="text-truncate-2" title="{{ $s->teks_pertanyaan }}">{{ $s->teks_pertanyaan }}</td>
                        <td class="num"><strong>{{ number_format($s->rata_rata, 2) }}</strong></td>
                        <td>
                            <div class="mini-bar-track"><div class="mini-bar-fill" style="width:{{ $s->rata_rata / 5 * 100 }}%"></div></div>
                        </td>
                        <td class="num text-muted">{{ $s->jml_ss }}</td>
                        <td class="num text-muted">{{ $s->jml_s }}</td>
                        <td class="num text-muted">{{ $s->jml_n }}</td>
                        <td class="num text-muted">{{ $s->jml_ts }}</td>
                        <td class="num text-muted">{{ $s->jml_sts }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

{{-- ================= DEMOGRAFI ================= --}}
<div class="section-title">Profil Demografi Responden</div>
<div class="grid grid-3">
    <div class="card">
        <h2>Jenis Kelamin</h2>
        <canvas id="chartGender" height="200"></canvas>
    </div>
    <div class="card">
        <h2>Kelompok Umur</h2>
        <canvas id="chartUmur" height="200"></canvas>
    </div>
    <div class="card">
        <h2>Domisili</h2>
        <canvas id="chartDomisili" height="200"></canvas>
    </div>
    <div class="card">
        <h2>Pendidikan Terakhir</h2>
        <canvas id="chartPendidikan" height="200"></canvas>
    </div>
    <div class="card">
        <h2>Pekerjaan</h2>
        <canvas id="chartPekerjaan" height="200"></canvas>
    </div>
    <div class="card">
        <h2>Jenis Penyakit</h2>
        <canvas id="chartPenyakit" height="200"></canvas>
    </div>
    <div class="card">
        <h2>Pendapatan per Bulan</h2>
        <canvas id="chartPendapatan" height="200"></canvas>
    </div>
</div>

{{-- ================= TERBARU ================= --}}
<div class="section-title">Aktivitas Terbaru</div>
<div class="grid grid-2">
    <div class="card">
        <h2>Responden Terbaru</h2>
        <div class="table-wrap">
            <table class="data-table">
                <thead>
                    <tr><th>ID</th><th>Status</th><th>Jenis Kelamin</th><th>Waktu</th><th></th></tr>
                </thead>
                <tbody>
                    @forelse ($respondenTerbaru as $r)
                        <tr>
                            <td>#{{ $r->id }}</td>
                            <td><span class="badge {{ $r->status_kelayakan === 'Memenuhi Syarat' ? 'badge-positif' : 'badge-negatif' }}">{{ $r->status_kelayakan }}</span></td>
                            <td>{{ optional($r->identitas)->jenis_kelamin ?? '-' }}</td>
                            <td class="text-muted">{{ $r->created_at->translatedFormat('d M Y, H:i') }}</td>
                            <td><a href="{{ route('admin.responden.show', $r->id) }}" class="btn btn-sm btn-secondary">Detail</a></td>
                        </tr>
                    @empty
                        <tr><td colspan="5" class="empty-state">Belum ada data responden.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    <div class="card">
        <h2>Jawaban Kualitatif Terbaru</h2>
        @forelse ($kualitatifTerbaru as $q)
            <div class="qual-item">
                <div class="qual-q">{{ optional($q->soal)->teks_pertanyaan }}</div>
                <div class="qual-a">{{ \Illuminate\Support\Str::limit($q->jawaban_text, 160) }}</div>
                <div class="qual-meta">Responden #{{ $q->responden_id }}</div>
            </div>
        @empty
            <div class="empty-state">Belum ada jawaban kualitatif.</div>
        @endforelse
    </div>
</div>
@endsection

@push('scripts')
<script>
Chart.defaults.font.family = "'Inter', sans-serif";
Chart.defaults.color = '#5a7a75';

const palette = ['#009688', '#66bb6a', '#26a69a', '#81c784', '#00796b', '#a5d6a7', '#004d40', '#c8e6c9', '#4db6ac', '#388e3c', '#80cbc4'];

new Chart(document.getElementById('chartTren'), {
    type: 'line',
    data: {
        labels: @json($labelTren),
        datasets: [
            { label: 'Memenuhi Syarat', data: @json($trenLengkap), borderColor: '#009688', backgroundColor: 'rgba(0,150,136,0.12)', tension: .35, fill: true },
            { label: 'Gagal Saringan', data: @json($trenGagal), borderColor: '#e05252', backgroundColor: 'rgba(224,82,82,0.08)', tension: .35, fill: true },
        ]
    },
    options: { responsive: true, plugins: { legend: { position: 'bottom' } }, scales: { y: { beginAtZero: true, ticks: { precision: 0 } } } }
});

new Chart(document.getElementById('chartDimensi'), {
    type: 'bar',
    data: {
        labels: @json($perDimensi->pluck('dimensi')),
        datasets: [{
            label: 'Rata-rata skor',
            data: @json($perDimensi->pluck('rata_rata')->map(fn($v) => round($v, 2))),
            backgroundColor: '#009688',
            borderRadius: 6
        }]
    },
    options: {
        indexAxis: 'y',
        plugins: {
            legend: {
                display: false
            },
            datalabels: {
                formatter: value => value.toFixed(2),
                color: '#000',
                anchor: 'end',
                align: 'right',
                offset: 8,
                font: {
                    weight: 'bold',
                    size: 12
                },
                clip: false
            }
        },
        scales: {
            x: {
                min: 1,
                max: 5
            }
        }
    },
    plugins: [ChartDataLabels]
});

new Chart(document.getElementById('chartPosNeg'), {
    type: 'doughnut',
    data: {
        labels: @json($positifNegatif->pluck('jenis_pernyataan')),
        datasets: [{
            data: @json($positifNegatif->pluck('rata_rata')->map(fn($v) => round($v, 2))),
            backgroundColor: ['#009688', '#e05252'],
            borderColor: '#fff',
            borderWidth: 2
        }]
    },
    plugins: [ChartDataLabels],
    options: {
        plugins: {
            legend: {
                position: 'bottom'
            },
            datalabels: {
                color: '#fff',
                font: {
                    weight: 'bold',
                    size: 16
                },
                formatter: function(value, context) {
                    let data = context.chart.data.datasets[0].data;
                    let total = data.reduce((a, b) => a + b, 0);
                    let percentage = (value / total * 100).toFixed(1);

                    return value + '\n(' + percentage + '%)';
                }
            }
        }
    }
});

function simpleBar(id, labels, data, horizontal = false) {
    new Chart(document.getElementById(id), {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                data: data,
                backgroundColor: palette,
                borderRadius: 6
            }]
        },
        options: {
            indexAxis: horizontal ? 'y' : 'x',
            plugins: {
                legend: {
                    display: false
                },
                datalabels: {
                    formatter: value => value,
                    color: '#000',
                    font: {
                        weight: 'bold',
                        size: 12
                    },
                    anchor: 'end',
                    align: horizontal ? 'right' : 'top',
                    offset: 10
                }
            },
            scales: {
                [horizontal ? 'x' : 'y']: {
                    beginAtZero: true,
                    suggestedMax: Math.max(...data) + 0.5,
                    ticks: {
                        precision: 0
                    }
                }
            }
        },
        plugins: [ChartDataLabels]
    });
}

simpleBar('chartGender', @json($genderDist->pluck('label')), @json($genderDist->pluck('total')));
simpleBar('chartUmur', @json($umurDist->pluck('label')), @json($umurDist->pluck('total')), true);
simpleBar('chartDomisili', @json($domisiliDist->pluck('label')), @json($domisiliDist->pluck('total')));
simpleBar('chartPendidikan', @json($pendidikanDist->pluck('label')), @json($pendidikanDist->pluck('total')));
simpleBar('chartPekerjaan', @json($pekerjaanDist->pluck('label')), @json($pekerjaanDist->pluck('total')), true);
simpleBar('chartPenyakit', @json($penyakitDist->pluck('label')), @json($penyakitDist->pluck('total')), true);
simpleBar('chartPendapatan', @json($pendapatanDist->pluck('label')), @json($pendapatanDist->pluck('total')), true);
</script>
@endpush