@php $isMarketing = auth()->user()->unit_type === 'marketing'; @endphp
@extends('layouts.app')
@section('title', 'Dashboard Manager')
@section('content')

@if($isMarketing)
{{-- ===== MARKETING / CONSUMER INSIGHT DASHBOARD ===== --}}
<div class="page-header">
    <h4 class="fw-bold mb-1">Dashboard Consumer Insight</h4>
    <p class="text-muted mb-0">{{ auth()->user()->unit_type === 'divisi' ? 'Ringkasan aktivitas panel test divisi ' . auth()->user()->division_label : 'Analisis consumer contact plan wilayah ' . auth()->user()->area_office }}</p>
</div>

{{-- STAT CARDS --}}
<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 CC Selesai</div>
            <div class="stat-number">{{ $totalProducts }}</div>
            <div class="stat-icon"><i class="bi bi-check-circle"></i></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 CC Plan</div>
            <div class="stat-number">{{ $totalTests }}</div>
            <div class="stat-icon"><i class="bi bi-clipboard-data"></i></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">Plan Aktif</div>
            <div class="stat-number">{{ $activeTests }}</div>
            <div class="stat-icon"><i class="bi bi-lightning-charge"></i></div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card stat-card-sm" style="background:linear-gradient(135deg,#7c3aed,#8b5cf6)">
            <div class="stat-label">Total SPG/APS</div>
            <div class="stat-number">{{ $totalSpg }}</div>
            <div class="stat-icon"><i class="bi bi-people"></i></div>
        </div>
    </div>
</div>

{{-- PROGRESS TABLE + FUNNEL --}}
<div class="row g-3 mb-4">
    <div class="col-lg-7">
        <div class="card h-100">
            <div class="card-header bg-white py-3">
                <h6 class="fw-semibold mb-0"><i class="bi bi-table text-primary"></i> {{ auth()->user()->unit_type === 'divisi' ? 'Progress Panel Test' : 'Progress Consumer Contact Plan' }}</h6>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>{{ auth()->user()->unit_type === 'divisi' ? 'Nama Surveyor' : 'Nama APS/SPG/TL' }}</th>
                                <th>Area Promotion</th>
                                <th>Target</th>
                                <th>Aktual</th>
                                <th>Achievement</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($progressData as $p)
                            @php $pct = $p['pct']; $done = $pct >= 100; @endphp
                            <tr>
                                <td class="fw-medium">{{ $p['name'] }}</td>
                                <td><small class="text-muted">{{ $p['product'] }}</small></td>
                                <td>{{ $p['target'] ?: '-' }}</td>
                                <td>{{ $p['achieved'] }}</td>
                                <td>
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="progress flex-grow-1" style="height:8px">
                                            <div class="progress-bar {{ $done ? 'bg-success' : ($pct >= 80 ? 'bg-warning' : 'bg-danger') }}"
                                                style="width:{{ min(100,$pct) }}%"></div>
                                        </div>
                                        <span class="small fw-semibold {{ $done ? 'text-success' : ($pct >= 80 ? 'text-warning' : 'text-danger') }}">
                                            {{ $pct }}%
                                        </span>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr><td colspan="5" class="text-center text-muted py-3">Belum ada data</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-5">
        <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"><i class="bi bi-filter text-success"></i> Consumer Funnel</h6>
                <div>
                    @php
                        $funnelOrder = ['Kenal','Tertarik','Coba','Beli','Rutin','Konsumen Setia'];
                        $firstVal = $funnelData->first() ?: 1;
                        $lastVal  = $funnelData->last() ?: 0;
                        $dropOff  = $firstVal > 0 ? round((1 - $lastVal/$firstVal)*100,1) : 0;
                    @endphp
                    <span class="badge bg-primary">Total: {{ $totalProducts }}</span>
                    <span class="badge bg-danger ms-1">Drop Off: {{ $dropOff }}%</span>
                </div>
            </div>
            <div class="card-body">
                <canvas id="funnelChart" height="200"></canvas>
            </div>
        </div>
    </div>
</div>

{{-- DEMOGRAPHY --}}
<div class="card mb-4">
    <div class="card-header bg-white py-3">
        <h6 class="fw-semibold mb-0"><i class="bi bi-people text-info"></i> Consumer Demography</h6>
    </div>
    <div class="card-body">
        <div class="row g-3">
            <div class="col-6 col-md-3">
                <h6 class="small fw-semibold text-muted text-center mb-2">Jenis Kelamin</h6>
                <canvas id="genderChart" height="180"></canvas>
            </div>
            <div class="col-6 col-md-3">
                <h6 class="small fw-semibold text-muted text-center mb-2">Generasi</h6>
                <canvas id="generasiChart" height="180"></canvas>
            </div>
            <div class="col-6 col-md-3">
                <h6 class="small fw-semibold text-muted text-center mb-2">Profesi</h6>
                <canvas id="profesiChart" height="180"></canvas>
            </div>
            <div class="col-6 col-md-3">
                <h6 class="small fw-semibold text-muted text-center mb-2">Pengeluaran RT/Bulan</h6>
                <canvas id="pengeluaranChart" height="180"></canvas>
            </div>
        </div>
    </div>
</div>

{{-- AWARENESS + BRAND INSIGHT --}}
<div class="row g-3 mb-4">
    <div class="col-lg-6">
        <div class="card h-100">
            <div class="card-header bg-white py-3">
                <h6 class="fw-semibold mb-0"><i class="bi bi-megaphone text-warning"></i> Awareness Channel</h6>
            </div>
            <div class="card-body">
                <canvas id="sumberChart" height="220"></canvas>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="row g-3 h-100">
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-white py-3">
                        <h6 class="fw-semibold mb-0"><i class="bi bi-tag text-primary"></i> Brand Aktivasi</h6>
                    </div>
                    <div class="card-body" style="max-height:200px;overflow-y:auto">
                        @foreach($brandAktivasiData->sortDesc()->take(8) as $brand => $count)
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="small">{{ $brand ?: 'Tidak diisi' }}</span>
                            <div class="d-flex align-items-center gap-2">
                                <div class="progress" style="width:80px;height:6px">
                                    <div class="progress-bar bg-primary" style="width:{{ $brandAktivasiData->max() > 0 ? round($count/$brandAktivasiData->max()*100) : 0 }}%"></div>
                                </div>
                                <span class="badge bg-primary">{{ $count }}</span>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-white py-3">
                        <h6 class="fw-semibold mb-0"><i class="bi bi-trophy text-danger"></i> Brand Kompetitor</h6>
                    </div>
                    <div class="card-body" style="max-height:180px;overflow-y:auto">
                        @foreach($kompetitorData->sortDesc()->take(6) as $brand => $count)
                        @if($brand)
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="small">{{ $brand }}</span>
                            <span class="badge bg-danger">{{ $count }}</span>
                        </div>
                        @endif
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- CONSUMER INSIGHT ANALYSIS --}}
<div class="row g-3 mb-4">
    <div class="col-lg-6">
        <div class="card h-100">
            <div class="card-header bg-white py-3">
                <h6 class="fw-semibold mb-0"><i class="bi bi-bar-chart text-primary"></i> Conversion Barrier</h6>
            </div>
            <div class="card-body">
                <canvas id="barrierChart" height="220"></canvas>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card h-100">
            <div class="card-header bg-white py-3">
                <h6 class="fw-semibold mb-0"><i class="bi bi-bar-chart-steps text-warning"></i> Alasan Pakai Kompetitor</h6>
            </div>
            <div class="card-body">
                <canvas id="alasanChart" height="220"></canvas>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Funnel Chart
const funnelOrder = ['Kenal','Tertarik','Coba','Beli','Rutin','Konsumen Setia'];
const funnelRaw   = @json($funnelData);
const funnelVals  = funnelOrder.map(k => funnelRaw[k] || 0);
new Chart(document.getElementById('funnelChart'), {
    type: 'bar',
    data: {
        labels: funnelOrder,
        datasets: [{ data: funnelVals, backgroundColor: ['#1e3a5f','#2563eb','#059669','#d97706','#7c3aed','#ec4899'], borderRadius: 6 }]
    },
    options: { plugins:{ legend:{display:false} }, scales:{ y:{ beginAtZero:true, ticks:{stepSize:1} } } }
});

// Gender Chart
const genderRaw = @json($genderData);
new Chart(document.getElementById('genderChart'), {
    type: 'doughnut',
    data: { labels: Object.keys(genderRaw), datasets: [{ data: Object.values(genderRaw), backgroundColor: ['#2563eb','#ec4899','#9ca3af'] }] },
    options: { plugins:{ legend:{ position:'bottom', labels:{ font:{size:10} } } } }
});

// Generasi Chart
const generasiRaw = @json($generasiData);
new Chart(document.getElementById('generasiChart'), {
    type: 'doughnut',
    data: { labels: Object.keys(generasiRaw), datasets: [{ data: Object.values(generasiRaw), backgroundColor: ['#1e3a5f','#2563eb','#059669','#d97706','#7c3aed'] }] },
    options: { plugins:{ legend:{ position:'bottom', labels:{ font:{size:9}, boxWidth:10 } } } }
});

// Profesi Chart
const profesiRaw = @json($profesiData);
new Chart(document.getElementById('profesiChart'), {
    type: 'bar',
    data: {
        labels: Object.keys(profesiRaw),
        datasets: [{ data: Object.values(profesiRaw), backgroundColor: '#059669', borderRadius: 4 }]
    },
    options: { indexAxis:'y', plugins:{legend:{display:false}}, scales:{ x:{beginAtZero:true,ticks:{stepSize:1}} } }
});

// Pengeluaran Chart
const pengeluaranRaw = @json($pengeluaranData);
new Chart(document.getElementById('pengeluaranChart'), {
    type: 'bar',
    data: {
        labels: Object.keys(pengeluaranRaw).map(k => k.length > 15 ? k.substring(0,15)+'...' : k),
        datasets: [{ data: Object.values(pengeluaranRaw), backgroundColor: '#d97706', borderRadius: 4 }]
    },
    options: { indexAxis:'y', plugins:{legend:{display:false}}, scales:{ x:{beginAtZero:true,ticks:{stepSize:1}} } }
});

// Sumber Chart
const sumberRaw = @json($sumberData);
const sumberKeys = Object.keys(sumberRaw).map(k => k.length > 20 ? k.substring(0,20)+'...' : k);
new Chart(document.getElementById('sumberChart'), {
    type: 'bar',
    data: {
        labels: sumberKeys,
        datasets: [{ data: Object.values(sumberRaw), backgroundColor: '#f59e0b', borderRadius: 4 }]
    },
    options: { indexAxis:'y', plugins:{legend:{display:false}}, scales:{ x:{beginAtZero:true,ticks:{stepSize:1}} } }
});

// Barrier Chart
const barrierRaw = @json($alasanTidakKonversiData ?? collect());
if (document.getElementById('barrierChart') && Object.keys(barrierRaw).length) {
    new Chart(document.getElementById('barrierChart'), {
        type: 'bar',
        data: {
            labels: Object.keys(barrierRaw).map(k => k.length > 30 ? k.substring(0,30)+'...' : k),
            datasets: [{ data: Object.values(barrierRaw), backgroundColor: '#2563eb', borderRadius: 4 }]
        },
        options: { indexAxis:'y', plugins:{legend:{display:false}}, scales:{ x:{beginAtZero:true,ticks:{stepSize:1}} } }
    });
}
// Alasan Kompetitor Chart
const alasanRaw = @json($alasanKompetitorData ?? collect());
if (document.getElementById('alasanChart') && Object.keys(alasanRaw).length) {
    new Chart(document.getElementById('alasanChart'), {
        type: 'bar',
        data: {
            labels: Object.keys(alasanRaw).map(k => k.length > 30 ? k.substring(0,30)+'...' : k),
            datasets: [{ data: Object.values(alasanRaw), backgroundColor: '#f59e0b', borderRadius: 4 }]
        },
        options: { indexAxis:'y', plugins:{legend:{display:false}}, scales:{ x:{beginAtZero:true,ticks:{stepSize:1}} } }
    });
}
</script>
@endpush

@else


<div class="page-header">
    <h4 class="fw-bold mb-1">Selamat datang, {{ auth()->user()->name }} 👋</h4>
    <p class="text-muted mb-0">{{ auth()->user()->unit_type === 'divisi' ? 'Ringkasan aktivitas panel test ' . auth()->user()->division_label : 'Ringkasan aktivitas consumer contact plan' }}</p>
</div>

<!-- Stat Cards -->
<div class="row g-3 mb-4">
    <div class="col-6 col-lg-3">
        <div class="stat-card" style="background:linear-gradient(135deg,#1e3a5f,#2563eb)">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    <div class="stat-label">{{ auth()->user()->unit_type === 'divisi' ? 'Total Panel Test Selesai' : 'Total CC Selesai' }}</div>
                    <div class="stat-number">{{ $totalProducts }}</div>
                </div>
                <div style="width:44px;height:44px;background:rgba(255,255,255,0.2);border-radius:10px;display:flex;align-items:center;justify-content:center">
                    <i class="bi bi-box-seam fs-5"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card" style="background:linear-gradient(135deg,#059669,#10b981)">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    <div class="stat-label">{{ auth()->user()->unit_type === 'divisi' ? 'Total Panel Test' : 'Total CC Plan' }}</div>
                    <div class="stat-number">{{ $totalTests }}</div>
                </div>
                <div style="width:44px;height:44px;background:rgba(255,255,255,0.2);border-radius:10px;display:flex;align-items:center;justify-content:center">
                    <i class="bi bi-clipboard-data fs-5"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card" style="background:linear-gradient(135deg,#d97706,#f59e0b)">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    <div class="stat-label">{{ auth()->user()->unit_type === 'divisi' ? 'Panel Test Aktif' : 'Contact Plan Aktif' }}</div>
                    <div class="stat-number">{{ $activeTests }}</div>
                </div>
                <div style="width:44px;height:44px;background:rgba(255,255,255,0.2);border-radius:10px;display:flex;align-items:center;justify-content:center">
                    <i class="bi bi-lightning-charge fs-5"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card" style="background:linear-gradient(135deg,#7c3aed,#a855f7)">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    <div class="stat-label">{{ auth()->user()->unit_type === 'divisi' ? 'Total Surveyor' : 'Total SPG' }}</div>
                    <div class="stat-number">{{ $totalSpg }}</div>
                </div>
                <div style="width:44px;height:44px;background:rgba(255,255,255,0.2);border-radius:10px;display:flex;align-items:center;justify-content:center">
                    <i class="bi bi-people fs-5"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row g-3">
    <!-- Chart Status -->
    <div class="col-lg-4">
        <div class="card h-100">
            <div class="card-header bg-white border-bottom py-3">
                <h6 class="mb-0 fw-semibold">{{ auth()->user()->unit_type === 'divisi' ? 'Status Panel Test' : 'Status Consumer Contact Plan' }}</h6>
            </div>
            <div class="card-body d-flex align-items-center justify-content-center">
                <canvas id="statusChart" width="220" height="220"></canvas>
            </div>
        </div>
    </div>

    <!-- Recent Tests -->
    <div class="col-lg-8">
        <div class="card h-100">
            <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center">
                <h6 class="mb-0 fw-semibold">{{ auth()->user()->unit_type === 'divisi' ? 'Panel Test Terbaru' : 'Consumer Contact Plan Terbaru' }}</h6>
                <a href="{{ route('panel-tests.index') }}" class="btn btn-sm btn-outline-primary">Lihat Semua</a>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>{{ auth()->user()->unit_type === 'divisi' ? 'Nama Panel Test' : 'Nama Brand Aktivasi' }}</th>
                                <th>{{ auth()->user()->unit_type === 'divisi' ? 'Nama Surveyor' : 'Nama APS/SPG/TL' }}</th>
                                <th>Tanggal</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">
                                        {{ $test->title }}
                                    </a>
                                </td>
                                <td><span class="text-muted">{{ $test->product->name }}</span></td>
                                <td><small>{{ $test->test_date->format('d M Y') }}</small></td>
                                <td>
                                    <span class="badge status-{{ $test->status }}">
                                        {{ ucfirst($test->status) }}
                                    </span>
                                </td>
                                <td>
                                    <span class="badge bg-light text-dark">
                                        {{ $test->testSessions->where('status','completed')->count() }} orang
                                    </span>
                                </td>
                            </tr>
                            @empty
                            <tr><td colspan="5" class="text-center text-muted py-4">{{ auth()->user()->unit_type === 'divisi' ? 'Belum ada panel test' : 'Belum ada consumer contact plan' }}</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@endif
@endsection
@push('scripts')
<script>
new Chart(document.getElementById('statusChart'), {
    type: 'doughnut',
    data: {
        labels: ['Draft', 'Aktif', 'Selesai'],
        datasets: [{
            data: [
                {{ $testsByStatus['draft'] ?? 0 }},
                {{ $testsByStatus['active'] ?? 0 }},
                {{ $testsByStatus['closed'] ?? 0 }},
            ],
            backgroundColor: ['#94a3b8', '#10b981', '#3b82f6'],
            borderWidth: 0,
        }]
    },
    options: {
        cutout: '70%',
        plugins: { legend: { position: 'bottom' } }
    }
});
</script>
@endpush