@extends('layouts.app')

@php
    $fmtNum = fn($v) => $v === null ? '—' : number_format((float) $v, 1);
@endphp

@section('title', 'KPI — Change Control')

@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-exchange-alt mr-2"></i> Change Control — 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' => 'Overdue',                  'value' => $snapshot['overdue']                  ?? 0, 'color' => 'danger',    'icon' => 'clock'],
                ['label' => 'Pending Approval',         'value' => $snapshot['pending_approval']         ?? 0, 'color' => 'warning',   'icon' => 'user-check'],
                ['label' => 'Critical',                 'value' => $snapshot['critical']                 ?? 0, 'color' => 'danger',    'icon' => 'exclamation-circle'],
                ['label' => 'Closed (This Month)',      'value' => $snapshot['closed_this_month']        ?? 0, 'color' => 'success',   'icon' => 'check-circle'],
                ['label' => 'Avg Age (Open)',           'value' => $fmtNum($snapshot['avg_age_days'] ?? null) . ' d', 'color' => 'secondary', 'icon' => 'hourglass-half'],
                ['label' => 'Avg Implementation (Closed)', 'value' => $fmtNum($snapshot['avg_implementation_days'] ?? null) . ' d', 'color' => 'secondary', 'icon' => 'clock'],
            ];
        @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 Status</h6>
                </div>
                <div class="card-body">
                    <canvas id="statusChart" style="height: 260px;"></canvas>
                </div>
            </div>
        </div>
    </div>

    <script>
        window.__kpiChart = {
            trend:  @json($snapshot['trend_30d'] ?? []),
            status: @json($snapshot['by_status'] ?? []),
        };
    </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.status || [];

        if (t.length) {
            new Chart(document.getElementById('trendChart'), {
                type: 'line',
                data: {
                    labels: t.map(x => x.label),
                    datasets: [{
                        label: 'New changes per day',
                        data: t.map(x => x.count),
                        borderColor: 'rgba(78, 115, 223, 1)',
                        backgroundColor: 'rgba(78, 115, 223, 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('statusChart'), {
                type: 'doughnut',
                data: {
                    labels: s.map(x => String(x.label).replace('_', ' ')),
                    datasets: [{
                        data: s.map(x => x.count),
                        backgroundColor: ['#4e73df','#1cc88a','#36b9cc','#f6c23e','#e74a3b','#858796','#5a5c69'],
                    }],
                },
                options: { responsive: true, maintainAspectRatio: false,
                    plugins: { legend: { position: 'bottom' } } },
            });
        }
    });
</script>
@endpush