@extends('layouts.app')
@section('title', 'Dashboard Super Admin')
@section('content')

<div class="page-header">
    <h4 class="fw-bold mb-1">
        <span class="badge bg-danger me-2">SUPER ADMIN</span>
        Dashboard Pusat
    </h4>
    <p class="text-muted mb-0">Monitoring seluruh area office</p>
</div>

<!-- Global Stats -->
<div class="row g-2 g-sm-3 mb-4">
    <div class="col-6 col-lg-3">
        <div class="stat-card stat-card-sm" style="background:linear-gradient(135deg,#1e3a5f,#2563eb)">
            <div class="stat-label">Total Produk</div>
            <div class="stat-number">{{ $totalProducts }}</div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card stat-card-sm" style="background:linear-gradient(135deg,#059669,#10b981)">
            <div class="stat-label">Total Panel Test</div>
            <div class="stat-number">{{ $totalTests }}</div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card stat-card-sm" style="background:linear-gradient(135deg,#d97706,#f59e0b)">
            <div class="stat-label">Total Users</div>
            <div class="stat-number">{{ $totalUsers }}</div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card stat-card-sm" style="background:linear-gradient(135deg,#7c3aed,#a855f7)">
            <div class="stat-label">Total Responden</div>
            <div class="stat-number">{{ $totalRespondents }}</div>
        </div>
    </div>
</div>

<!-- Statistik per Area Office -->
@php
    $areaColors = ['primary','success','warning','danger','info','secondary'];
@endphp
<div class="row g-3 mb-4">
    @foreach($regionStats as $i => $stat)
    @php $color = $areaColors[$i % count($areaColors)]; @endphp
    <div class="col-12 col-sm-6 col-xl-3">
        <div class="card h-100">
            <div class="card-header bg-white py-3">
                <span class="badge bg-{{ $color }} px-3">
                    {{ $stat['area_office'] }}
                </span>
            </div>
            <div class="card-body">
                <div class="row g-2 text-center">
                    <div class="col-4">
                        <div style="font-size:1.5rem;font-weight:700;color:#1e3a5f">{{ $stat['total_spg'] }}</div>
                        <div style="font-size:11px;color:#64748b">SPG</div>
                    </div>
                    <div class="col-4">
                        <div style="font-size:1.5rem;font-weight:700;color:#059669">{{ $stat['total_tests'] }}</div>
                        <div style="font-size:11px;color:#64748b">Tests</div>
                    </div>
                    <div class="col-4">
                        <div style="font-size:1.5rem;font-weight:700;color:#d97706">{{ $stat['respondents'] }}</div>
                        <div style="font-size:11px;color:#64748b">Responden</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>

<!-- Chart & Recent Tests -->
<div class="row g-3">
    <div class="col-lg-5">
        <div class="card h-100">
            <div class="card-header bg-white py-3">
                <h6 class="fw-semibold mb-0">Responden per Area Office</h6>
            </div>
            <div class="card-body d-flex align-items-center justify-content-center">
                <canvas id="areaChart" width="260" height="260"></canvas>
            </div>
        </div>
    </div>
    <div class="col-lg-7">
        <div class="card h-100">
            <div class="card-header bg-white py-3 d-flex justify-content-between">
                <h6 class="fw-semibold mb-0">Panel Test Terbaru</h6>
                <a href="{{ route('panel-tests.index') }}" class="btn btn-sm btn-outline-primary">Semua</a>
            </div>
            <div class="card-body p-0">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Judul</th>
                            <th>Area Office</th>
                            <th>Status</th>
                            <th>Peserta</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentTests as $test)
                        <tr>
                            <td>
                                <a href="{{ route('panel-tests.show', $test) }}" class="text-decoration-none fw-medium">
                                    {{ Str::limit($test->title, 30) }}
                                </a>
                                <div><small class="text-muted">{{ $test->product->name ?? '-' }}</small></div>
                            </td>
                            <td>
                                <span class="badge bg-primary">
                                    {{ $test->area_office ?? $test->division ?? '-' }}
                                </span>
                            </td>
                            <td>
                                <span class="badge status-{{ $test->status }}">
                                    {{ ucfirst($test->status) }}
                                </span>
                            </td>
                            <td>{{ $test->testSessions->where('status','completed')->count() }}</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="text-center text-muted py-3">Belum ada data</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
// Data dinamis dari controller
const areaLabels  = @json(collect($regionStats)->pluck('area_office'));
const areaData    = @json(collect($regionStats)->pluck('respondents'));
const areaColors  = ['#3b82f6','#22c55e','#f59e0b','#ef4444','#8b5cf6','#06b6d4','#f97316','#ec4899'];

new Chart(document.getElementById('areaChart'), {
    type: 'doughnut',
    data: {
        labels: areaLabels,
        datasets: [{
            data: areaData,
            backgroundColor: areaColors.slice(0, areaLabels.length),
            borderWidth: 3,
        }]
    },
    options: {
        cutout: '65%',
        plugins: { legend: { position: 'bottom' } }
    }
});
</script>
@endpush