@extends('layouts.app')

@section('content')
<div class="row">
    <div class="col-md-12 grid-margin">
        <div class="row">
            <div class="col-12 col-xl-8 mb-4 mb-xl-0">
                <h3 class="font-weight-bold">Analytics Dashboard</h3>
                <h6 class="font-weight-normal mb-0">Student Performance Overview and Analytics</h6>
            </div>
        </div>
    </div>
</div>

<!-- Statistics Cards -->
<div class="row">
    <div class="col-md-6 col-xl-3 mb-4 mb-xl-0">
        <div class="card h-100">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <p class="text-muted">Total Students</p>
                        <h6 class="text-muted font-weight-normal">{{ $totalStudents }}</h6>
                    </div>
                    <div class="icon icon-box-success">
                        <span class="ti-user icon-item"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-xl-3 mb-4 mb-xl-0">
        <div class="card h-100">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <p class="text-muted">Total Results</p>
                        <h6 class="text-muted font-weight-normal">{{ $totalResults }}</h6>
                    </div>
                    <div class="icon icon-box-warning">
                        <span class="ti-clipboard icon-item"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-xl-3 mb-4 mb-xl-0">
        <div class="card h-100">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <p class="text-muted">Average GPA</p>
                        <h6 class="text-muted font-weight-normal">{{ number_format($averageGPA ?? 0, 2) }}</h6>
                    </div>
                    <div class="icon icon-box-primary">
                        <span class="ti-bar-chart icon-item"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-xl-3 mb-4 mb-xl-0">
        <div class="card h-100">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <p class="text-muted">Average CGPA</p>
                        <h6 class="text-muted font-weight-normal">{{ number_format($averageCGPA ?? 0, 2) }}</h6>
                    </div>
                    <div class="icon icon-box-success">
                        <span class="ti-pie-chart icon-item"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Charts Section -->
<div class="row">
    <!-- Grade Distribution Chart -->
    <div class="col-md-6 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">
                <p class="card-title">Grade Distribution</p>
                <canvas id="gradeChart"></canvas>
            </div>
        </div>
    </div>
    
    <!-- GPA Range Distribution -->
    <div class="col-md-6 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">
                <p class="card-title">GPA Range Distribution</p>
                <canvas id="gpaRangeChart"></canvas>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Course Performance Chart -->
    <div class="col-md-8 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">
                <p class="card-title">Course Performance Comparison</p>
                <canvas id="coursePerformanceChart"></canvas>
            </div>
        </div>
    </div>
    
    <!-- Top Performers -->
    <div class="col-md-4 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">
                <p class="card-title">Top Performers</p>
                <div class="table-responsive">
                    <table class="table table-borderless">
                        <tbody>
                            @foreach($topPerformers->take(5) as $performer)
                            <tr>
                                <td>
                                    <div class="d-flex">
                                        <div>
                                            <div class="font-weight-bold">{{ $performer->name }}</div>
                                            <div class="text-muted">{{ $performer->rollno }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="text-right">
                                    <div class="badge badge-success">{{ number_format($performer->avg_cgpa, 2) }}</div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Subject Performance -->
<div class="row">
    <div class="col-md-8 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">
                <p class="card-title">Subject Performance Analysis</p>
                <div class="table-responsive">
                    <table class="table table-striped table-borderless">
                        <thead>
                            <tr>
                                <th>Subject</th>
                                <th>Average Mark</th>
                                <th>Average GPA</th>
                                <th>Total Results</th>
                                <th>Performance</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($subjectPerformance as $subject)
                            <tr>
                                <td class="font-weight-bold">{{ $subject->subject }}</td>
                                <td>{{ number_format($subject->avg_mark, 1) }}</td>
                                <td>{{ number_format($subject->avg_gpa, 2) }}</td>
                                <td>{{ $subject->result_count }}</td>
                                <td>
                                    @if($subject->avg_gpa >= 3.5)
                                        <span class="badge badge-success">Excellent</span>
                                    @elseif($subject->avg_gpa >= 3.0)
                                        <span class="badge badge-warning">Good</span>
                                    @elseif($subject->avg_gpa >= 2.0)
                                        <span class="badge badge-secondary">Average</span>
                                    @else
                                        <span class="badge badge-danger">Needs Improvement</span>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Recent Activity -->
    <div class="col-md-4 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">
                <p class="card-title">Recent Results</p>
                <div class="preview-list">
                    @foreach($recentResults as $result)
                    <div class="preview-item border-bottom">
                        <div class="preview-thumbnail">
                            <div class="preview-icon bg-primary">
                                <i class="ti-file"></i>
                            </div>
                        </div>
                        <div class="preview-item-content d-sm-flex flex-grow">
                            <div class="flex-grow">
                                <h6 class="preview-subject">{{ $result->name }}</h6>
                                <p class="text-muted mb-0">{{ $result->subject }} - {{ $result->course }}</p>
                            </div>
                            <div class="mr-auto text-sm-right pt-2 pt-sm-0">
                                <div class="badge badge-pill 
                                    @if($result->grade == 'A+' || $result->grade == 'A') badge-success
                                    @elseif($result->grade == 'B+' || $result->grade == 'B') badge-warning  
                                    @else badge-danger @endif">
                                    {{ $result->grade }}
                                </div>
                                <div class="text-muted">{{ $result->created_at->diffForHumans() }}</div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Grade Distribution Chart
    const gradeData = @json($gradeDistribution);
    const gradeLabels = gradeData.map(item => item.grade);
    const gradeCounts = gradeData.map(item => item.count);
    
    const gradeCtx = document.getElementById('gradeChart').getContext('2d');
    new Chart(gradeCtx, {
        type: 'doughnut',
        data: {
            labels: gradeLabels,
            datasets: [{
                data: gradeCounts,
                backgroundColor: [
                    '#4B49AC', '#7978E9', '#F3797E', '#FFC107',
                    '#36A2EB', '#FF6384', '#4BC0C0', '#9966FF'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });

    // GPA Range Chart
    const gpaRanges = @json($gpaRanges);
    const gpaRangeLabels = Object.keys(gpaRanges);
    const gpaRangeCounts = Object.values(gpaRanges);
    
    const gpaRangeCtx = document.getElementById('gpaRangeChart').getContext('2d');
    new Chart(gpaRangeCtx, {
        type: 'bar',
        data: {
            labels: gpaRangeLabels,
            datasets: [{
                label: 'Number of Students',
                data: gpaRangeCounts,
                backgroundColor: '#4B49AC',
                borderColor: '#4B49AC',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    // Course Performance Chart
    const courseData = @json($coursePerformance);
    const courseLabels = courseData.map(item => item.course);
    const courseGPAs = courseData.map(item => parseFloat(item.avg_gpa));
    
    const courseCtx = document.getElementById('coursePerformanceChart').getContext('2d');
    new Chart(courseCtx, {
        type: 'line',
        data: {
            labels: courseLabels,
            datasets: [{
                label: 'Average GPA',
                data: courseGPAs,
                borderColor: '#7978E9',
                backgroundColor: 'rgba(121, 120, 233, 0.1)',
                fill: true,
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: true
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    max: 4.0
                }
            }
        }
    });
});
</script>
@endpush