@extends('layouts.main')

@section('content')
<div class="bg-white min-h-screen py-4">
<div class="container-fluid mx-auto px-4">
    <!-- Baris 1: Tren Kunjungan User (lebar) + Total User (samping) -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-4 mb-4 items-stretch">
        <div class="lg:col-span-9">
            <div class="card-box h-full">
                <div class="card-head">TREN KUNJUNGAN USER</div>
                <div class="card-body">
                    <div class="chart-wrap">
                        <canvas id="trendUserLine"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="lg:col-span-3">
            <div class="card-box h-full">
                <div class="card-head text-center">TOTAL USER</div>
                <div class="card-body text-center">
                    <div class="chart-wrap">
                        <canvas id="totalUserDonut"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Baris 2: Tren Kegiatan (lebar) + Status & Jenis Langganan (dua kecil) -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-4 mb-4 items-stretch">
        <div class="lg:col-span-9">
            <div class="card-box h-full">
                <div class="card-head">TREN KEGIATAN</div>
                <div class="card-body">
                    <div class="chart-wrap">
                        <canvas id="activityTrendBar"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="lg:col-span-3">
            <div class="grid grid-cols-2 gap-4 h-full">
                <div class="col-span-2">
                    <div class="card-box h-full">
                        <div class="card-head text-center">KOMPARASI USER DAN ANGGOTA</div>
                        <div class="card-body text-center">
                            <div class="chart-wrap">
                                <canvas id="userAnggotaPie"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Baris 3: User Berdasarkan Provinsi (lebar penuh) -->
    <div class="grid grid-cols-1 mb-4 items-stretch">
        <div>
            <div class="card-box h-full">
                <div class="card-head">USER BERDASARKAN PROVINSI</div>
                <div class="card-body">
                    <div class="chart-wrap">
                        <canvas id="userProvinceBar"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Baris 4: Daftar ringkas (Top Users, Top Rated Activities, Top Creators) -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-4 items-stretch">
        <!-- Top 10 User Teraktif -->
        @if(($showTopActiveUsers ?? true))
        <div>
            <div class="card-box h-full bg-white rounded-xl shadow border border-gray-200">
                <div class="card-head text-gray-800">10 USER TERAKTIF</div>
                <div class="card-body">
                    <ul class="divide-y divide-gray-200">
                        @forelse(($topActiveUsers ?? []) as $i => $u)
                            <li class="flex items-center justify-between py-2">
                                <div class="flex items-center gap-3">
                                    @if(!empty($u['photo']))
                                        <img src="{{ asset('assets/images/profilefoto/' . $u['photo']) }}" alt="avatar" class="w-8 h-8 rounded-full object-cover" onerror="this.src='{{ asset('assets/images/profilefoto/default-profile.png') }}'">
                                    @else
                                        <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 font-semibold">{{ strtoupper(substr($u['name'],0,1)) }}</div>
                                    @endif
                                    <div>
                                        <div class="text-sm font-medium text-gray-900">{{ $i+1 }}. {{ $u['name'] }}</div>
                                        <div class="text-xs mt-0.5">
                                            <span class="inline-block px-2 py-[2px] rounded bg-sky-100 text-sky-700">aktif</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex items-center gap-2">
                                    <span class="text-sm font-semibold text-gray-900">{{ $u['total'] }}</span>
                                    @php $delta = (int)($u['delta'] ?? 0); @endphp
                                    @if($delta > 0)
                                        <span class="text-emerald-500 text-sm">▲</span>
                                    @elseif($delta < 0)
                                        <span class="text-rose-400 text-sm">▼</span>
                                    @else
                                        <span class="text-gray-500 text-sm">▬</span>
                                    @endif
                                </div>
                            </li>
                        @empty
                            <li class="text-gray-600 py-2">Belum ada data</li>
                        @endforelse
                    </ul>
                </div>
            </div>
        </div>
        @endif

        <!-- Top 5 Aktivitas Rating Tertinggi -->
        @if(($showTopRatedActivities ?? true))
        <div>
            <div class="card-box card-box-transparent h-full">
                <div class="card-head">5 AKTIVITAS RATING TERTINGGI</div>
                <div class="card-body">
                    <ul class="space-y-2 text-sm text-gray-700">
                        @forelse(($topRatedActivities ?? []) as $i => $a)
                            <li class="flex justify-between"><span>{{ $i+1 }}. {{ $a['name'] }}</span><span class="font-semibold">{{ number_format($a['rating'], 1) }}</span></li>
                        @empty
                            <li class="text-gray-600">Belum ada data</li>
                        @endforelse
                    </ul>
                </div>
            </div>
        </div>
        @endif

        <!-- Top 10 Creator Dengan Kegiatan Aktif Terbanyak (gaya tabel highlights) -->
        @if(($showTopCreators ?? true))
        <div>
            <div class="card-box h-full bg-white rounded-xl shadow border border-gray-200">
                <div class="card-head text-gray-800">10 CREATOR TERBAIK</div>
                <div class="card-body">
                    <div class="overflow-x-auto">
                        <table class="w-full text-sm">
                            <thead>
                                <tr class="text-gray-600">
                                    <th class="text-left font-semibold py-2">AUTHOR</th>
                                    <th class="text-right font-semibold py-2">AKT.</th>
                                    <th class="text-right font-semibold py-2">PESERTA</th>
                                    <th class="text-center font-semibold py-2">CHART</th>
                                    <th class="text-center font-semibold py-2">VIEW</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200">
                                @forelse(($topCreators ?? []) as $i => $c)
                                    <tr>
                                        <td class="py-2 pr-2">
                                            <div class="flex items-center gap-3">
                                                @if(!empty($c['photo']))
                                                    <img src="{{ asset('assets/images/profilefoto/' . $c['photo']) }}" alt="avatar" class="w-9 h-9 rounded-full object-cover" onerror="this.src='{{ asset('assets/images/profilefoto/default-profile.png') }}'">
                                                @else
                                                    <div class="w-9 h-9 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 font-semibold">{{ strtoupper(substr($c['name'],0,1)) }}</div>
                                                @endif
                                                <div>
                                                    <div class="text-gray-900 font-medium">{{ $c['name'] }}</div>
                                                    <div class="text-xs text-gray-500">{{ $c['province'] ?? '-' }}</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="py-2 text-right text-gray-900 font-semibold">{{ $c['activities_active'] ?? $c['activities_all'] ?? 0 }}</td>
                                        <td class="py-2 text-right text-gray-900 font-semibold">{{ $c['participants_active'] ?? $c['participants_total'] ?? 0 }}</td>
                                        <td class="py-2">
                                            <div class="spark h-7 w-24 mx-auto">
                                                <canvas id="creatorSpark_{{ $i }}"></canvas>
                                            </div>
                                        </td>
                                        <td class="py-2 text-center">
                                            <a href="#" class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-600 text-white hover:bg-blue-700">→</a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr><td colspan="4" class="py-3 text-center text-gray-600">Belum ada data</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>

</div>
</div>

@push('styles')
<style>
 /* Cards: ubah ke tema terang */
 .card-box { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 22px; padding: 12px; }
 .card-box-transparent { background: transparent; border: 0 !important; }
 .card-head { font-weight: 700; letter-spacing: .5px; padding: 6px 8px; color: #0f172a; }
 .card-body { padding: 8px; }
 .chart-wrap { position: relative; width: 100%; height: 260px; }
 /* versi kecil untuk donut langganan */
 .chart-wrap-sm { height: 180px; }
 .spark { position: relative; }
 canvas { width: 100% !important; height: 100% !important; }

 /* Penyesuaian warna teks gelap agar terbaca di latar putih */
 .card-box .text-gray-100 { color: #111827 !important; }
 .card-box .text-slate-300 { color: #374151 !important; }
 .card-box .text-slate-400 { color: #6b7280 !important; }
 .card-box .text-slate-200 { color: #4b5563 !important; }

 /* Placeholder avatar yang semula gelap menjadi netral terang */
 .card-box .bg-slate-700 { background-color: #e5e7eb !important; color: #374151 !important; }

 /* Garis pembatas daftar agar ringan */
 .card-box .divide-slate-700 > :not([hidden]) ~ :not([hidden]) { border-color: #e5e7eb !important; }
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Dashboard data configuration
    window.dashboardData = {
        trendUser: {!! json_encode($trendUser ?? ['labels' => [], 'userBiasa' => [], 'anggotaKogtik' => []]) !!},
        totalUser: {
            @php
                $gLabels = $profileStats['gender']['labels'] ?? [];
                $gData = $profileStats['gender']['data'] ?? [];
                $male = 0; $female = 0;
                foreach(($gLabels ?? []) as $i => $lbl) {
                    $low = strtolower($lbl);
                    if (str_contains($low, 'laki')) { $male += $gData[$i] ?? 0; }
                    elseif (str_contains($low, 'perempuan')) { $female += $gData[$i] ?? 0; }
                }
            @endphp
            male: {{ $male }},
            female: {{ $female }},
            total: {{ $female + $male }}
        },
        activityTrend: {!! json_encode($categoryData ?? []) !!},
        userAnggota: {!! json_encode($userAnggotaData ?? ['totalAnggota' => 0, 'userBukanAnggota' => 0, 'total' => 0]) !!},
        userProvince: {!! json_encode($profileStats['region'] ?? []) !!},
        topCreators: {!! json_encode($topCreators ?? []) !!}
    };
</script>
<script src="{{ asset('js/dashboard-charts.js') }}"></script>
@endpush
@endsection