@extends('layouts.appv2')

@section('content')
<div class="container">
    <div class="card p-6 bg-white rounded-lg shadow-md">
        <div class="card-header mb-4">
            <h1 class="text-2xl font-bold">AI Generated Attendance Report</h1>
        </div>
        
        <div class="card-body">
            <!-- AI-generated report  -->
            <div class="prose max-w-none mb-8">
                {!! nl2br(e($report)) !!}
            </div>
            <br>

            <!-- AI suggested charts: -->
            @foreach($charts as $index => $chart)
                <div class="bg-gray-50 p-5 rounded-xl mb-6">
                    <h2 class="text-xl font-semibold mb-4">{{ $chart['title'] ?? 'Chart '.($index+1) }}</h2>
                    <div class="w-80 h-[500px]">
                        <canvas id="chart{{ $index }}"></canvas>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>

{{-- Chart.js --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const charts = @json($charts);

    charts.forEach((chart, index) => {
        const ctx = document.getElementById(`chart${index}`).getContext('2d');

        // 🛑 Destroy old chart if it exists
        if (window[`chartInstance${index}`]) {
            window[`chartInstance${index}`].destroy();
        }

        // ✅ Create new chart
        window[`chartInstance${index}`] = new Chart(ctx, {
            type: chart.type || 'bar',
            data: {
                labels: chart.labels || [],
                datasets: chart.datasets || []
            },
            options: {
                responsive: true,
                maintainAspectRatio: false
            }
        });
    });
</script>

@endsection