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

<div class="page-header">
    <h4 class="fw-bold mb-1">
        <span class="badge me-2" style="background:#7c3aed">MARKETING ADMIN</span>
        Dashboard Consumer Insight — Semua Wilayah
    </h4>
    <p class="text-muted mb-0">Monitoring seluruh kegiatan consumer insight</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 Consumer Contact</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">Consumer Contact Plan</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 User Consumer Insight</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">
    @forelse($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>
    @empty
    <div class="col-12">
        <div class="alert alert-info">Belum ada data area office.</div>
    </div>
    @endforelse
</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 align-items-center">
                <h6 class="fw-semibold mb-0">Consumer Contact Plan Terbaru</h6>
                <div class="d-flex gap-2">
                    <a href="{{ route('reports.index') }}" class="btn btn-sm btn-outline-success">
                        Laporan
                    </a>
                    <a href="{{ route('panel-tests.index') }}" class="btn btn-sm btn-outline-primary">
                        Semua
                    </a>
                </div>
            </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>Responden</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 ?? '-' }}
                                </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 panel test marketing
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- Quick Actions --}}
<div class="row g-3 mt-2">
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-white py-3">
                <h6 class="fw-semibold mb-0">Akses Cepat</h6>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-6 col-md-3">
                        <a href="{{ route('users.index') }}"
                           class="btn btn-outline-primary w-100 py-3">
                            <i class="bi bi-people-fill d-block fs-4 mb-1"></i>
                            Kelola User Marketing
                        </a>
                    </div>
                    <div class="col-6 col-md-3">
                        <a href="{{ route('panel-tests.index') }}"
                           class="btn btn-outline-success w-100 py-3">
                            <i class="bi bi-clipboard-data d-block fs-4 mb-1"></i>
                            Panel Test
                        </a>
                    </div>
                    <div class="col-6 col-md-3">
                        <a href="{{ route('reports.index') }}"
                           class="btn btn-outline-warning w-100 py-3">
                            <i class="bi bi-bar-chart-fill d-block fs-4 mb-1"></i>
                            Laporan & Grafik
                        </a>
                    </div>
                    <div class="col-6 col-md-3">
                        <a href="{{ route('master-data.index') }}"
                           class="btn btn-outline-secondary w-100 py-3">
                            <i class="bi bi-database-fill d-block fs-4 mb-1"></i>
                            Master Data
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
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