@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>

            <!-- Attendance Summary Chart -->
            <div class="bg-gray-50 p-5 rounded-xl">
                <h2 class="text-xl font-semibold mb-4">Attendance Summary ({{ $startDate }} - {{ $endDate }})</h2>
                <canvas id="attendanceChart" height="120"></canvas>
            </div>
        </div>

    </div>
</div>

{{-- Chart.js --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementById('attendanceChart').getContext('2d');
    const chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: {!! json_encode($attendanceSummary->pluck('username')) !!},
            datasets: [
                {
                    label: 'Work Days',
                    data: {!! json_encode($attendanceSummary->pluck('total_work_days')) !!},
                    backgroundColor: 'rgba(54, 162, 235, 0.7)',
                },
                {
                    label: 'Absent Days',
                    data: {!! json_encode($attendanceSummary->pluck('total_absent_days')) !!},
                    backgroundColor: 'rgba(255, 99, 132, 0.7)',
                },
                {
                    label: 'Late Days',
                    data: {!! json_encode($attendanceSummary->pluck('late_days')) !!},
                    backgroundColor: 'rgba(255, 206, 86, 0.7)',
                },
                {
                    label: 'Overtime Hours',
                    data: {!! json_encode($attendanceSummary->pluck('overtime_hours')) !!},
                    backgroundColor: 'rgba(75, 192, 192, 0.7)',
                }
            ]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { position: 'bottom' }
            }
        }
    });
</script>
@endsection