@extends('layouts.app')

@section('title', 'Analytics')

@push('styles')
<style>
    /* ── Layout ── */
    .an-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
    .an-full    { margin-bottom: 1.5rem; }

    /* ── KPI strip ── */
    .kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1.75rem; }
    .kpi-card  { background: #fff; border: 1px solid var(--gray-200); border-radius: 14px; padding: 1.15rem 1.35rem; display: flex; align-items: center; gap: .9rem; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
    .kpi-ico   { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; }
    .kpi-val   { font-size: 1.7rem; font-weight: 800; color: var(--gray-900); line-height: 1; }
    .kpi-lbl   { font-size: .73rem; color: var(--gray-500); margin-top: .2rem; }

    /* ── Chart card ── */
    .ch-card   { background: #fff; border: 1px solid var(--gray-200); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
    .ch-head   { padding: .9rem 1.4rem; border-bottom: 1px solid var(--gray-100); }
    .ch-title  { font-size: .9rem; font-weight: 700; color: var(--gray-900); display: flex; align-items: center; gap: .45rem; }
    .ch-title i { color: var(--green); font-size: .85rem; }
    .ch-sub    { font-size: .72rem; color: var(--gray-400); margin-top: .12rem; }
    .ch-body   { padding: 1.4rem; }
    .ch-wrap   { position: relative; }

    /* ── Legend pills ── */
    .legend-pills { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
    .pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 600; padding: .2rem .6rem; border-radius: 20px; color: #fff; }

    /* ── Empty state ── */
    .empty-chart { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 200px; color: var(--gray-400); font-size: .84rem; gap: .5rem; }
    .empty-chart i { font-size: 2rem; opacity: .4; }

    @media (max-width: 900px) {
        .an-grid-2 { grid-template-columns: 1fr; }
        .kpi-strip { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 480px) {
        .kpi-strip { grid-template-columns: 1fr; }
    }
</style>
@endpush

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title"><i class="fas fa-chart-pie"></i> Analytics</h1>
        <p class="page-subtitle">Platform feedback insights, distributions, and trends.</p>
    </div>
    @if(auth()->user()?->role?->name === 'admin')
    <a href="{{ route('admin.export.csv') }}" class="btn-primary">
        <i class="fas fa-file-csv"></i> Export CSV
    </a>
    @endif
</div>

{{-- ════════ KPI STRIP ════════ --}}
<div class="kpi-strip">
    <div class="kpi-card">
        <div class="kpi-ico" style="background:#e6f7ef;color:#00a651;"><i class="fas fa-paper-plane"></i></div>
        <div>
            <div class="kpi-val">{{ number_format($total) }}</div>
            <div class="kpi-lbl">Total Submissions</div>
        </div>
    </div>
    <div class="kpi-card">
        <div class="kpi-ico" style="background:#dbeafe;color:#2563eb;"><i class="fas fa-gem"></i></div>
        <div>
            <div class="kpi-val">{{ number_format($valuable) }}</div>
            <div class="kpi-lbl">Valuable Feedback</div>
        </div>
    </div>
    <div class="kpi-card">
        <div class="kpi-ico" style="background:#fef3c7;color:#d97706;"><i class="fas fa-lightbulb"></i></div>
        <div>
            <div class="kpi-val">{{ number_format($implementable) }}</div>
            <div class="kpi-lbl">Implementable Ideas</div>
        </div>
    </div>
    <div class="kpi-card">
        <div class="kpi-ico" style="background:#ede9fe;color:#7c3aed;"><i class="fas fa-crown"></i></div>
        <div>
            <div class="kpi-val">{{ number_format($ceoChoice) }}</div>
            <div class="kpi-lbl">CEO Choice Awards</div>
        </div>
    </div>
    <div class="kpi-card">
        <div class="kpi-ico" style="background:#f0fdf4;color:#059669;"><i class="fas fa-percent"></i></div>
        <div>
            <div class="kpi-val">{{ $actionableRate }}%</div>
            <div class="kpi-lbl">Actionable Rate</div>
        </div>
    </div>
</div>

{{-- ════════ 30-DAY TREND LINE ════════ --}}
<div class="an-full">
    <div class="ch-card">
        <div class="ch-head">
            <div class="ch-title"><i class="fas fa-chart-line"></i> 30-Day Submission Trend</div>
            <div class="ch-sub">Daily feedback submissions over the last 30 days</div>
        </div>
        <div class="ch-body">
            <div class="ch-wrap" style="height:220px;">
                <canvas id="trendChart"></canvas>
            </div>
        </div>
    </div>
</div>

{{-- ════════ SOURCE DONUT + QUALITY DONUT ════════ --}}
<div class="an-grid-2">
    <div class="ch-card">
        <div class="ch-head">
            <div class="ch-title"><i class="fas fa-circle-dot"></i> Feedback by Source</div>
            <div class="ch-sub">Where submissions are coming from</div>
        </div>
        <div class="ch-body">
            @if(array_sum($sourceData) > 0)
            <div class="ch-wrap" style="height:230px;">
                <canvas id="sourceChart"></canvas>
            </div>
            @else
            <div class="empty-chart"><i class="fas fa-inbox"></i> No submission data yet</div>
            @endif
        </div>
    </div>

    <div class="ch-card">
        <div class="ch-head">
            <div class="ch-title"><i class="fas fa-star-half-stroke"></i> Feedback Quality Mix</div>
            <div class="ch-sub">Distribution by management review flags</div>
        </div>
        <div class="ch-body">
            @if($total > 0)
            <div class="ch-wrap" style="height:230px;">
                <canvas id="qualityChart"></canvas>
            </div>
            @else
            <div class="empty-chart"><i class="fas fa-inbox"></i> No feedback data yet</div>
            @endif
        </div>
    </div>
</div>

{{-- ════════ PROJECT SUBMISSIONS BAR ════════ --}}
<div class="an-full">
    <div class="ch-card">
        <div class="ch-head">
            <div class="ch-title"><i class="fas fa-chart-bar"></i> Submissions by Project</div>
            <div class="ch-sub">Total feedback received per CashBaba strategic project</div>
        </div>
        <div class="ch-body">
            <div class="ch-wrap" style="height:260px;">
                <canvas id="projectChart"></canvas>
            </div>
        </div>
    </div>
</div>

{{-- ════════ RESPONDENT TYPE + LANGUAGE ════════ --}}
<div class="an-grid-2">
    <div class="ch-card">
        <div class="ch-head">
            <div class="ch-title"><i class="fas fa-users"></i> Respondent Type Breakdown</div>
            <div class="ch-sub">Who is providing feedback</div>
        </div>
        <div class="ch-body">
            @if(count($respondentLabels) > 0)
            <div class="ch-wrap" style="height:260px;">
                <canvas id="respondentChart"></canvas>
            </div>
            @else
            <div class="empty-chart"><i class="fas fa-users"></i> No respondent data yet</div>
            @endif
        </div>
    </div>

    <div class="ch-card">
        <div class="ch-head">
            <div class="ch-title"><i class="fas fa-language"></i> Language Distribution</div>
            <div class="ch-sub">Survey language preference of respondents</div>
        </div>
        <div class="ch-body">
            @if(count($languageLabels) > 0)
            <div class="ch-wrap" style="height:260px;">
                <canvas id="languageChart"></canvas>
            </div>
            @else
            <div class="empty-chart"><i class="fas fa-language"></i> No language data yet</div>
            @endif
        </div>
    </div>
</div>

{{-- ════════ STACKED SOURCE TREND ════════ --}}
<div class="an-full">
    <div class="ch-card">
        <div class="ch-head">
            <div class="ch-title"><i class="fas fa-layer-group"></i> Source Breakdown — Last 30 Days</div>
            <div class="ch-sub">Daily view of submissions split by collection source</div>
        </div>
        <div class="ch-body">
            <div class="ch-wrap" style="height:240px;">
                <canvas id="sourceTrendChart"></canvas>
            </div>
        </div>
    </div>
</div>

{{-- ════════ MONTHLY VOLUME BAR ════════ --}}
<div class="an-full">
    <div class="ch-card">
        <div class="ch-head">
            <div class="ch-title"><i class="fas fa-calendar-days"></i> Monthly Submission Volume</div>
            <div class="ch-sub">Feedback collected over the last 6 months</div>
        </div>
        <div class="ch-body">
            <div class="ch-wrap" style="height:220px;">
                <canvas id="monthlyChart"></canvas>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
<script>
(function () {
    'use strict';

    // ── Shared defaults ────────────────────────────────────────────
    Chart.defaults.font.family  = 'Inter, sans-serif';
    Chart.defaults.font.size    = 12;
    Chart.defaults.color        = '#64748b';
    Chart.defaults.plugins.tooltip.padding = 10;
    Chart.defaults.plugins.tooltip.cornerRadius = 8;

    const GREEN      = '#00a651';
    const GREEN_DARK = '#007a3d';
    const BLUE       = '#2563eb';
    const AMBER      = '#d97706';
    const PURPLE     = '#7c3aed';
    const ROSE       = '#e11d48';
    const TEAL       = '#0891b2';
    const SLATE      = '#94a3b8';

    const gridColor  = '#f1f5f9';
    const tickColor  = '#94a3b8';

    const axisStyle = {
        grid: { color: gridColor },
        ticks: { color: tickColor },
        border: { display: false },
    };
    const axisNoGrid = {
        grid: { display: false },
        ticks: { color: tickColor },
        border: { display: false },
    };

    // ── 1. 30-Day Trend Line ───────────────────────────────────────
    new Chart(document.getElementById('trendChart'), {
        type: 'line',
        data: {
            labels: @json($trendDates),
            datasets: [{
                label: 'Submissions',
                data: @json($trendCounts),
                borderColor: GREEN,
                backgroundColor: 'rgba(0,166,81,.08)',
                borderWidth: 2.5,
                pointRadius: 3,
                pointHoverRadius: 5,
                pointBackgroundColor: GREEN,
                fill: true,
                tension: 0.4,
            }],
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { display: false } },
            scales: {
                x: { ...axisNoGrid, ticks: { ...axisNoGrid.ticks, maxTicksLimit: 10, maxRotation: 0 } },
                y: { ...axisStyle, beginAtZero: true, ticks: { ...axisStyle.ticks, precision: 0 } },
            },
        },
    });

    // ── 2. Source Donut ────────────────────────────────────────────
    @if(array_sum($sourceData) > 0)
    new Chart(document.getElementById('sourceChart'), {
        type: 'doughnut',
        data: {
            labels: @json($sourceLabels),
            datasets: [{
                data: @json($sourceData),
                backgroundColor: [GREEN, BLUE, ROSE, AMBER],
                borderWidth: 3,
                borderColor: '#fff',
                hoverOffset: 6,
            }],
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            cutout: '62%',
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: { padding: 16, boxWidth: 11, usePointStyle: true, pointStyleWidth: 11 },
                },
            },
        },
    });
    @endif

    // ── 3. Quality Donut ──────────────────────────────────────────
    @if($total > 0)
    new Chart(document.getElementById('qualityChart'), {
        type: 'doughnut',
        data: {
            labels: ['Regular', 'Valuable', 'Implementable', 'CEO Choice'],
            datasets: [{
                data: [{{ $regular }}, {{ $valuable }}, {{ $implementable }}, {{ $ceoChoice }}],
                backgroundColor: [SLATE, BLUE, AMBER, PURPLE],
                borderWidth: 3,
                borderColor: '#fff',
                hoverOffset: 6,
            }],
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            cutout: '62%',
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: { padding: 16, boxWidth: 11, usePointStyle: true, pointStyleWidth: 11 },
                },
            },
        },
    });
    @endif

    // ── 4. Project Bar ─────────────────────────────────────────────
    new Chart(document.getElementById('projectChart'), {
        type: 'bar',
        data: {
            labels: @json($projectLabels),
            datasets: [{
                label: 'Submissions',
                data: @json($projectData),
                backgroundColor: [
                    'rgba(0,166,81,.82)',
                    'rgba(37,99,235,.82)',
                    'rgba(217,119,6,.82)',
                    'rgba(124,58,237,.82)',
                    'rgba(225,29,72,.82)',
                    'rgba(8,145,178,.82)',
                ],
                borderRadius: 7,
                borderSkipped: false,
            }],
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { display: false } },
            scales: {
                x: axisNoGrid,
                y: { ...axisStyle, beginAtZero: true, ticks: { ...axisStyle.ticks, precision: 0 } },
            },
        },
    });

    // ── 5. Respondent Type Horizontal Bar ─────────────────────────
    @if(count($respondentLabels) > 0)
    new Chart(document.getElementById('respondentChart'), {
        type: 'bar',
        data: {
            labels: @json($respondentLabels),
            datasets: [{
                label: 'Submissions',
                data: @json($respondentData),
                backgroundColor: 'rgba(0,166,81,.75)',
                borderColor: GREEN,
                borderWidth: 1.5,
                borderRadius: 5,
            }],
        },
        options: {
            indexAxis: 'y',
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { display: false } },
            scales: {
                x: { ...axisStyle, beginAtZero: true, ticks: { ...axisStyle.ticks, precision: 0 } },
                y: axisNoGrid,
            },
        },
    });
    @endif

    // ── 6. Language Pie ────────────────────────────────────────────
    @if(count($languageLabels) > 0)
    new Chart(document.getElementById('languageChart'), {
        type: 'pie',
        data: {
            labels: @json($languageLabels),
            datasets: [{
                data: @json($languageData),
                backgroundColor: [GREEN, BLUE, AMBER, PURPLE, ROSE, TEAL],
                borderWidth: 3,
                borderColor: '#fff',
                hoverOffset: 6,
            }],
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: { padding: 16, boxWidth: 11, usePointStyle: true, pointStyleWidth: 11 },
                },
            },
        },
    });
    @endif

    // ── 7. Stacked Source Trend ────────────────────────────────────
    new Chart(document.getElementById('sourceTrendChart'), {
        type: 'bar',
        data: {
            labels: @json($trendDates),
            datasets: [
                {
                    label: 'Employee',
                    data: @json($sourceTrendEmployee),
                    backgroundColor: 'rgba(0,166,81,.82)',
                    stack: 'src',
                    borderRadius: { topLeft: 0, topRight: 0 },
                },
                {
                    label: 'Public',
                    data: @json($sourceTrendPublic),
                    backgroundColor: 'rgba(37,99,235,.82)',
                    stack: 'src',
                },
                {
                    label: 'QR',
                    data: @json($sourceTrendQr),
                    backgroundColor: 'rgba(225,29,72,.82)',
                    stack: 'src',
                },
                {
                    label: 'Booth',
                    data: @json($sourceTrendBooth),
                    backgroundColor: 'rgba(217,119,6,.82)',
                    stack: 'src',
                    borderRadius: { topLeft: 4, topRight: 4 },
                },
            ],
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: { padding: 16, boxWidth: 11, usePointStyle: true, pointStyleWidth: 11 },
                },
            },
            scales: {
                x: { ...axisNoGrid, ticks: { ...axisNoGrid.ticks, maxTicksLimit: 12 } },
                y: { ...axisStyle, stacked: true, beginAtZero: true, ticks: { ...axisStyle.ticks, precision: 0 } },
            },
        },
    });

    // ── 8. Monthly Bar ─────────────────────────────────────────────
    new Chart(document.getElementById('monthlyChart'), {
        type: 'bar',
        data: {
            labels: @json($monthLabels),
            datasets: [{
                label: 'Submissions',
                data: @json($monthCounts),
                backgroundColor: 'rgba(0,166,81,.82)',
                borderColor: GREEN_DARK,
                borderWidth: 1.5,
                borderRadius: 7,
                borderSkipped: false,
            }],
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { display: false } },
            scales: {
                x: axisNoGrid,
                y: { ...axisStyle, beginAtZero: true, ticks: { ...axisStyle.ticks, precision: 0 } },
            },
        },
    });

})();
</script>
@endpush