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

@if($isMarketing)
{{-- ===== MARKETING SPV DASHBOARD ===== --}}
<div class="page-header">
    <h4 class="fw-bold mb-1">Dashboard Supervisor Consumer Insight</h4>
    <p class="text-muted mb-0">{{ auth()->user()->area_office }} &bull; {{ auth()->user()->area_promotion }}</p>
</div>

<div class="row g-2 g-sm-3 mb-4">
    <div class="col-6 col-lg-4">
        <div class="stat-card stat-card-sm" style="background:linear-gradient(135deg,#1e3a5f,#2563eb)">
            <div class="stat-label">Total Consumer Contact Selesai</div>
            <div class="stat-number">{{ $totalProducts }}</div>
            <a href="{{ route('test-sessions.index') }}" class="btn btn-sm mt-2" style="background:rgba(255,255,255,0.2);color:#fff;border:none;font-size:12px">
                Lihat Riwayat <i class="bi bi-arrow-right"></i>
            </a>
        </div>
    </div>
    <div class="col-6 col-lg-4">
        <div class="stat-card stat-card-sm" style="background:linear-gradient(135deg,#059669,#10b981)">
            <div class="stat-label">Contact Plan Saya</div>
            <div class="stat-number">{{ $myTests }}</div>
            <a href="{{ route('panel-tests.index') }}" class="btn btn-sm mt-2" style="background:rgba(255,255,255,0.2);color:#fff;border:none;font-size:12px">
                Kelola Contact Plan <i class="bi bi-arrow-right"></i>
            </a>
        </div>
    </div>
    <div class="col-6 col-lg-4">
        <div class="stat-card stat-card-sm" style="background:linear-gradient(135deg,#d97706,#f59e0b)">
            <div class="stat-label">Draft Contact Plan</div>
            <div class="stat-number">{{ $draftTests }}</div>
            <a href="{{ route('panel-tests.create') }}" class="btn btn-sm mt-2" style="background:rgba(255,255,255,0.2);color:#fff;border:none;font-size:12px">
                Buat Baru <i class="bi bi-plus"></i>
            </a>
        </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> Progress Consumer Contact Plan</h6>
            </div>
            <div class="card-body p-0">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr><th>Nama SPG/APS</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 SPG</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-lg-5">
        <div class="card h-100">
            <div class="card-header bg-white py-3">
                <h6 class="fw-semibold mb-0"><i class="bi bi-filter text-success"></i> Consumer Funnel</h6>
            </div>
            <div class="card-body">
                <canvas id="funnelChartSpv" 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-md-3">
                <h6 class="small fw-semibold text-muted text-center mb-2">Jenis Kelamin</h6>
                <canvas id="genderChartSpv" height="180"></canvas>
            </div>
            <div class="col-md-3">
                <h6 class="small fw-semibold text-muted text-center mb-2">Generasi</h6>
                <canvas id="generasiChartSpv" height="180"></canvas>
            </div>
            <div class="col-md-3">
                <h6 class="small fw-semibold text-muted text-center mb-2">Profesi</h6>
                <canvas id="profesiChartSpv" height="180"></canvas>
            </div>
            <div class="col-md-3">
                <h6 class="small fw-semibold text-muted text-center mb-2">Pengeluaran RT/Bulan</h6>
                <canvas id="pengeluaranChartSpv" height="180"></canvas>
            </div>
        </div>
    </div>
</div>

{{-- AWARENESS + BRAND --}}
<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="sumberChartSpv" 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 ?: '-' }}</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="barrierChartSpv" 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="alasanChartSpv" height="220"></canvas>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
const funnelOrderSpv = ['Kenal','Tertarik','Coba','Beli','Rutin','Konsumen Setia'];
const funnelRawSpv   = @json($funnelData);
new Chart(document.getElementById('funnelChartSpv'), {
    type: 'bar',
    data: { labels: funnelOrderSpv, datasets: [{ data: funnelOrderSpv.map(k => funnelRawSpv[k]||0), backgroundColor: ['#1e3a5f','#2563eb','#059669','#d97706','#7c3aed','#ec4899'], borderRadius: 6 }] },
    options: { plugins:{legend:{display:false}}, scales:{y:{beginAtZero:true,ticks:{stepSize:1}}} }
});
const genderRawSpv = @json($genderData);
new Chart(document.getElementById('genderChartSpv'), {
    type: 'doughnut',
    data: { labels: Object.keys(genderRawSpv), datasets: [{ data: Object.values(genderRawSpv), backgroundColor: ['#2563eb','#ec4899','#9ca3af'] }] },
    options: { plugins:{ legend:{position:'bottom',labels:{font:{size:10}}} } }
});
const generasiRawSpv = @json($generasiData);
new Chart(document.getElementById('generasiChartSpv'), {
    type: 'doughnut',
    data: { labels: Object.keys(generasiRawSpv), datasets: [{ data: Object.values(generasiRawSpv), backgroundColor: ['#1e3a5f','#2563eb','#059669','#d97706','#7c3aed'] }] },
    options: { plugins:{ legend:{position:'bottom',labels:{font:{size:9},boxWidth:10}} } }
});
const profesiRawSpv = @json($profesiData);
new Chart(document.getElementById('profesiChartSpv'), {
    type: 'bar',
    data: { labels: Object.keys(profesiRawSpv), datasets: [{ data: Object.values(profesiRawSpv), backgroundColor: '#059669', borderRadius: 4 }] },
    options: { indexAxis:'y', plugins:{legend:{display:false}}, scales:{x:{beginAtZero:true,ticks:{stepSize:1}}} }
});
const pengeluaranRawSpv = @json($pengeluaranData);
new Chart(document.getElementById('pengeluaranChartSpv'), {
    type: 'bar',
    data: { labels: Object.keys(pengeluaranRawSpv).map(k=>k.length>15?k.substring(0,15)+'...':k), datasets: [{ data: Object.values(pengeluaranRawSpv), backgroundColor: '#d97706', borderRadius: 4 }] },
    options: { indexAxis:'y', plugins:{legend:{display:false}}, scales:{x:{beginAtZero:true,ticks:{stepSize:1}}} }
});
const sumberRawSpv = @json($sumberData);
new Chart(document.getElementById('sumberChartSpv'), {
    type: 'bar',
    data: { labels: Object.keys(sumberRawSpv).map(k=>k.length>20?k.substring(0,20)+'...':k), datasets: [{ data: Object.values(sumberRawSpv), backgroundColor: '#f59e0b', borderRadius: 4 }] },
    options: { indexAxis:'y', plugins:{legend:{display:false}}, scales:{x:{beginAtZero:true,ticks:{stepSize:1}}} }
});

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

@else

@php $isMarketing = auth()->user()->unit_type === 'marketing'; @endphp

<div class="page-header">
    <h4 class="fw-bold mb-1">Dashboard Supervisor</h4>
    <p class="text-muted mb-0">{{ $isMarketing ? 'Ringkasan aktivitas consumer contact plan' : 'Kelola produk dan panel test' }}</p>
</div>

<div class="row g-2 g-sm-3 mb-4">
    <div class="col-6 col-lg-4">
        <div class="stat-card stat-card-sm" style="background:linear-gradient(135deg,#1e3a5f,#2563eb)">
            <div class="stat-label">{{ $isMarketing ? 'Total Consumer Contact Selesai' : 'Total Produk' }}</div>
            <div class="stat-number">{{ $totalProducts }}</div>
            <a href="{{ route('products.index') }}" class="btn btn-sm mt-2" style="background:rgba(255,255,255,0.2);color:#fff;border:none;font-size:12px">
            @if(!$isMarketing)
                Kelola Produk <i class="bi bi-arrow-right"></i>
            @else
            <a href="{{ route('test-sessions.index') }}" class="btn btn-sm mt-2" style="background:rgba(255,255,255,0.2);color:#fff;border:none;font-size:12px">
                Lihat Riwayat Contact <i class="bi bi-arrow-right"></i>
            </a>
            @endif
            </a>
        </div>
    </div>
    <div class="col-6 col-lg-4">
        <div class="stat-card stat-card-sm" style="background:linear-gradient(135deg,#059669,#10b981)">
            <div class="stat-label">{{ $isMarketing ? 'Contact Plan Saya' : 'Test Saya' }}</div>
            <div class="stat-number">{{ $myTests }}</div>
            <a href="{{ route('panel-tests.index') }}" class="btn btn-sm mt-2" style="background:rgba(255,255,255,0.2);color:#fff;border:none;font-size:12px">
                {{ $isMarketing ? 'Kelola Contact Plan' : 'Kelola Test' }} <i class="bi bi-arrow-right"></i>
            </a>
        </div>
    </div>
    <div class="col-6 col-lg-4">
        <div class="stat-card stat-card-sm" style="background:linear-gradient(135deg,#d97706,#f59e0b)">
            <div class="stat-label">{{ $isMarketing ? 'Draft Contact Plan' : 'Draft Test' }}</div>
            <div class="stat-number">{{ $draftTests }}</div>
            <a href="{{ route('panel-tests.create') }}" class="btn btn-sm mt-2" style="background:rgba(255,255,255,0.2);color:#fff;border:none;font-size:12px">
                Buat Baru <i class="bi bi-plus"></i>
            </a>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center">
        <h6 class="mb-0 fw-semibold">{{ $isMarketing ? 'Consumer Contact Plan Aktif' : 'Panel Test Aktif' }}</h6>
        <a href="{{ route('panel-tests.create') }}" class="btn btn-primary btn-sm">
            <i class="bi bi-plus-lg"></i> {{ $isMarketing ? 'Buat Consumer Contact Plan' : 'Buat Panel Test' }}
        </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>{{ $isMarketing ? 'Nama Brand Aktivasi' : 'Judul' }}</th><th>{{ $isMarketing ? 'Nama APS/SPG/TL' : 'Produk' }}</th><th>Tanggal</th><th>Peserta</th><th>Aksi</th></tr>
                </thead>
                <tbody>
                    @forelse($activeTests as $test)
                    <tr>
                        <td class="fw-medium">{{ $test->title }}</td>
                        <td>{{ $test->product->name }}</td>
                        <td>{{ $test->test_date->format('d M Y') }}</td>
                        <td>{{ $test->testSessions->where('status','completed')->count() }} orang</td>
                        <td>
                            <a href="{{ route('panel-tests.show', $test) }}" class="btn btn-sm btn-outline-primary">
                                <i class="bi bi-eye"></i> Detail
                            </a>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="5" class="text-center text-muted py-4">{{ $isMarketing ? 'Belum ada consumer contact plan aktif' : 'Belum ada panel test aktif' }}</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endif
@endsection