@extends('layouts.app')

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

@section('sidebar-menu')
    @include('teacher.partials.sidebar')
@endsection
@section('sidebar-footer')
    <p>Welcome, Teacher</p>
@endsection

@section('breadcrumb')
    <span><a href="#">Home</a></span> / <span class="active-page">Teacher 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=Admin" class="avatar-sm">
            <span>Mrs. Wanjiku</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-4">
            <div class="stat-card">
                <div class="stat-icon"><i class="fas fa-users"></i></div>
                <div class="stat-info">
                    <h3>{{ $myClasses->count() }}</h3>
                    <p>Assigned Classes</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="stat-card">
                <div class="stat-icon"><i class="fas fa-file-alt"></i></div>
                <div class="stat-info">
                    <h3>{{ $myClasses->sum(fn($c) => $c->capacity ?? 0) }}</h3>
                    <p>Total Students</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="stat-card">
                <div class="stat-icon"><i class="fas fa-check-circle"></i></div>
                <div class="stat-info">
                    <h3>{{ $pendingSubmissions }}</h3>
                    <p>Pending Submissions</p>
                </div>
            </div>
        </div>
    </div>

    @if($announcements->count() > 0)
    <div class="row mt-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm rounded-4" style="background: linear-gradient(135deg, #e54027, #f78d48); color: white;">
                <div class="card-body p-4">
                    <h5 class="mb-3"><i class="fas fa-bullhorn me-2"></i>Latest Announcements</h5>
                    <div class="row g-3">
                        @foreach($announcements as $announcement)
                        <div class="col-md-4">
                            <div class="bg-white bg-opacity-10 p-3 rounded-3 h-100">
                                <h6 class="mb-1 text-white">{{ $announcement->title }}</h6>
                                <p class="small mb-0 opacity-75">{{ Str::limit($announcement->content, 80) }}</p>
                                <small class="d-block mt-2 opacity-50">{{ $announcement->created_at->diffForHumans() }}</small>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <div class="row g-4 mt-2">
        <div class="col-lg-7">
            <div class="card shadow-sm">
                <div class="card-header">📋 Upcoming Tasks / Exams</div>
                <ul class="list-group list-group-flush">
                    @forelse($upcomingAssignments as $assignment)
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span>
                                {{ $assignment->title }} — 
                                <strong>{{ $assignment->schoolClass->name }}</strong>
                            </span>
                            <span class="badge bg-danger">
                                Due {{ $assignment->due_date->format('M d') }}
                            </span>
                        </li>
                    @empty
                        <li class="list-group-item text-muted">No upcoming assignments at the moment.</li>
                    @endforelse
                </ul>
            </div>
        </div>
        <div class="col-lg-5">
            <div class="card shadow-sm">
                <div class="card-header">📊 Class Performance Snapshot</div>
                <div class="card-body"><canvas id="teacherPie" height="150"></canvas></div>
            </div>
        </div>
    </div>
    <div class="card mt-4 shadow-sm">
        <div class="card-header d-flex justify-content-between"><span>📝 Marks Edit & Audit Log
                (Recent)</span><input type="search" class="form-control form-control-sm w-25"
                placeholder="Filter student"></div>
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Student ID</th>
                        <th>Name</th>
                        <th>Subject</th>
                        <th>Exam</th>
                        <th>Score</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>STU101</td>
                        <td>Brian Kipruto</td>
                        <td>Math</td>
                        <td>Term 1 Exam</td>
                        <td>82</td>
                        <td>Approved</td>
                    </tr>
                    <tr>
                        <td>STU102</td>
                        <td>Lucy Adhiambo</td>
                        <td>English</td>
                        <td>Term 1 Exam</td>
                        <td>91</td>
                        <td>Pending</td>
                    </tr>
                    <tr>
                        <td>STU103</td>
                        <td>Emmanuel Otieno</td>
                        <td>Science</td>
                        <td>Practical</td>
                        <td>78</td>
                        <td>Submitted</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="card-footer"><button class="btn btn-orange">Bulk Upload Marks</button></div>
    </div>

@endsection

@section('custom-scripts')
<script>new Chart(document.getElementById('teacherPie'), { type: 'doughnut', data: { labels: ['Above 80%', '60-80%', 'Below 60%'], datasets: [{ data: [18, 5, 1], backgroundColor: ['#2d4ca7', '#6fa8dd', '#e54027'] }] } });</script>
@endsection