@extends('layouts.app')

@section('title', 'KPI — Audits')

@section('content')
<div class="container-fluid">

    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h3 class="mb-0"><i class="fas fa-clipboard-list mr-2"></i> Audits — KPIs</h3>
            <a href="{{ route('kpi.overview') }}" class="small">
                <i class="fas fa-arrow-left mr-1"></i> Back to Overview
            </a>
        </div>
    </div>

    <div class="row">
        @php
            $cards = [
                ['label' => 'Total',              'value' => $snapshot['total']            ?? 0, 'color' => 'primary',   'icon' => 'database'],
                ['label' => 'Open',               'value' => $snapshot['open']             ?? 0, 'color' => 'info',      'icon' => 'folder-open'],
                ['label' => 'In Progress',        'value' => $snapshot['in_progress']      ?? 0, 'color' => 'primary',   'icon' => 'search'],
                ['label' => 'Overdue',            'value' => $snapshot['overdue']          ?? 0, 'color' => 'danger',    'icon' => 'clock'],
                ['label' => 'Open Findings',      'value' => $snapshot['open_findings']    ?? 0, 'color' => 'warning',   'icon' => 'exclamation-triangle'],
                ['label' => 'Major NCs',          'value' => $snapshot['major_nc']         ?? 0, 'color' => 'danger',    'icon' => 'exclamation-circle'],
                ['label' => 'Closed (This Year)', 'value' => $snapshot['closed_this_year'] ?? 0, 'color' => 'success',   'icon' => 'check-circle'],
            ];
        @endphp

        @foreach($cards as $c)
            <div class="col-lg-3 col-md-4 mb-3">
                <div class="card border-left-{{ $c['color'] }} shadow h-100 py-2">
                    <div class="card-body">
                        <div class="text-xs font-weight-bold text-{{ $c['color'] }} text-uppercase mb-1">
                            {{ $c['label'] }}
                        </div>
                        <div class="h3 mb-0 font-weight-bold text-gray-800">{{ $c['value'] }}</div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card shadow mb-3">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">30-Day Trend</h6>
                </div>
                <div class="card-body">
                    <canvas id="trendChart" style="height: 260px;"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card shadow mb-3">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">By Type</h6>
                </div>
                <div class="card-body">
                    <canvas id="typeChart" style="height: 260px;"></canvas>
                </div>
            </div>
        </div>
    </div>

    <script>
        window.__kpiChart = {
            trend: @json($snapshot['trend_30d'] ?? []),
            type:  @json($snapshot['by_type'] ?? []),
        };
    </script>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const t = window.__kpiChart.trend || [];
        const s = window.__kpiChart.type || [];

        if (t.length) {
            new Chart(document.getElementById('trendChart'), {
                type: 'line',
                data: {
                    labels: t.map(x => x.label),
                    datasets: [{
                        label: 'New audits per day',
                        data: t.map(x => x.count),
                        borderColor: 'rgba(133, 135, 150, 1)',
                        backgroundColor: 'rgba(133, 135, 150, 0.15)',
                        fill: true, tension: 0.3, pointRadius: 2,
                    }],
                },
                options: { responsive: true, maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    scales: { y: { beginAtZero: true, ticks: { precision: 0 } } } },
            });
        }

        if (s.length) {
            new Chart(document.getElementById('typeChart'), {
                type: 'doughnut',
                data: {
                    labels: s.map(x => String(x.label).replace('_', ' ')),
                    datasets: [{
                        data: s.map(x => x.count),
                        backgroundColor: ['#4e73df','#1cc88a','#36b9cc','#f6c23e','#e74a3b'],
                    }],
                },
                options: { responsive: true, maintainAspectRatio: false,
                    plugins: { legend: { position: 'bottom' } } },
            });
        }
    });
</script>
@endpush