@extends('layouts.app')

@section('title', 'Student Dashboard | Institution Axis')

@section('sidebar-menu')
    <li class="nav-item active"><a href="#"><i class="fas fa-home"></i><span>Dashboard</span></a></li>
    <li class="nav-item"><a href="#"><i class="fas fa-chart-line"></i><span>My Results</span></a></li>
    <li class="nav-item"><a href="#"><i class="fas fa-calendar-alt"></i><span>Timetable</span></a></li>
    <li class="nav-item"><a href="#"><i class="fas fa-book"></i><span>Library</span></a></li>
    <li class="nav-item"><a href="#"><i class="fas fa-comment"></i><span>Messages</span></a></li>
@endsection
@section('sidebar-footer')
    <p>Student Access</p>
@endsection

@section('breadcrumb')
    <span><a href="#">Home</a></span> / <span class="active-page">Student Dashboard</span>
@endsection

@section('navbar-right')
    <div class="notification-icon"><i class="fas fa-bell"></i><span class="badge-notify">5</span></div>
    <div class="profile-dropdown dropdown">
        <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown">
            <img src="https://ui-avatars.com/api/?background=e54027&color=fff&name=Student" class="avatar-sm">
            <span>Kevin M.</span> <i class="fas fa-chevron-down"></i>
        </a>
        <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="#">Profile</a></li>
            <li><a class="dropdown-item" href="#">Logout</a></li>
        </ul>
    </div>
@endsection

@section('content')
<div class="row g-4">
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-info">
                <h3>Grade 8</h3>
                <p>Class: Alpha</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-info">
                <h3>88.5%</h3>
                <p>Overall Average</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-info">
                <h3>98%</h3>
                <p>Attendance</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-info">
                <h3>Rank #5</h3>
                <p>Out of 48</p>
            </div>
        </div>
    </div>
</div>
<div class="row mt-4">
    <div class="col-lg-6">
        <div class="card shadow-sm">
            <div class="card-header">📚 Recent Performance (Subjects)</div><canvas
                id="studentSubjectChart" height="200"></canvas>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card shadow-sm">
            <div class="card-header">📅 Upcoming Events / Homework</div>
            <ul class="list-group">
                <li class="list-group-item">Math Assignment due: 12 Apr <span
                        class="badge bg-primary">New</span></li>
                <li class="list-group-item">Science Quiz on Friday</li>
                <li class="list-group-item">Parent-Teacher meeting 20th April</li>
            </ul>
        </div>
    </div>
</div>
<div class="card mt-4 shadow-sm">
    <div class="card-header">📖 Fee Statement & Balance</div>
    <div class="card-body">
        <table class="table table-bordered">
            <tr>
                <th>Term</th>
                <th>Total Fees</th>
                <th>Paid</th>
                <th>Balance</th>
            </tr>
            <tr>
                <td>Term 1 2026</td>
                <td>KES 25,000</td>
                <td>KES 20,000</td>
                <td class="text-danger">KES 5,000</td>
            </tr>
        </table><button class="btn btn-sm btn-outline-primary">Download Receipt</button>
    </div>
</div>

@endsection

@section('custom-scripts')
<script>new Chart(document.getElementById('studentSubjectChart'), { type: 'bar', data: { labels: ['Math', 'English', 'Science', 'History'], datasets: [{ label: 'Score %', data: [92, 85, 78, 88], backgroundColor: '#2d4ca7' }] } });</script>
@endsection