@extends('layouts.app')

@section('title', 'School Admin Dashboard | Institution Axis')

@section('sidebar-menu')
    @include('schooladmin.partials.sidebar')
@endsection

@section('sidebar-footer')
    <p>{{ auth()->user()->school?->name ?? 'Institution Axis' }}</p>
@endsection

@section('breadcrumb')
    <span><a href="#">Home</a></span> / <span class="active-page">School 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>{{ auth()->user()->name }} • {{ auth()->user()->school?->name ?? 'No School' }}</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="#">School Settings</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item text-danger" href="{{ route('logout') }}">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-icon"><i class="fas fa-users"></i></div><div class="stat-info"><h3>1,280</h3><p>Total Students</p></div></div></div>
                <div class="col-md-3"><div class="stat-card"><div class="stat-icon"><i class="fas fa-chalkboard"></i></div><div class="stat-info"><h3>42</h3><p>Teachers</p></div></div></div>
                <div class="col-md-3"><div class="stat-card"><div class="stat-icon"><i class="fas fa-money-bill-wave"></i></div><div class="stat-info"><h3>KES 1.2M</h3><p>Fees Collected</p></div></div></div>
                <div class="col-md-3"><div class="stat-card"><div class="stat-icon"><i class="fas fa-percent"></i></div><div class="stat-info"><h3>94%</h3><p>Attendance Rate</p></div></div></div>
            </div>
            <div class="row g-4 mt-1">
                <div class="col-lg-6"><div class="card shadow-sm border-0 rounded-4"><div class="card-header bg-white"><h5>Performance Trends</h5></div><div class="card-body"><canvas id="trendChart" height="180"></canvas></div></div></div>
                <div class="col-lg-6"><div class="card shadow-sm border-0 rounded-4"><div class="card-header bg-white"><h5>Recent Fee Payments</h5></div><div class="table-responsive"><table class="table table-sm"><thead><tr><th>Student</th><th>Amount</th><th>Date</th></tr></thead><tbody><tr><td>James Mwangi</td><td>KES 12,500</td><td>Apr 8, 2026</td></tr><tr><td>Lilian Achieng</td><td>KES 8,200</td><td>Apr 7</td></tr></tbody></table></div></div></div>
            </div>
            <div class="card mt-4 shadow-sm rounded-4"><div class="card-header d-flex justify-content-between"><span><i class="fas fa-clipboard-list"></i> Pending Approvals (Staff/Leaves)</span><input type="text" class="form-control form-control-sm w-25" placeholder="Search..."></div><div class="card-body p-0"><table class="table table-hover mb-0"><thead><tr><th>Request</th><th>Teacher</th><th>Status</th><th>Action</th></tr></thead><tbody><tr><td>Leave Application</td><td>Ann Wanjiku</td><td><span class="badge bg-warning">Pending</span></td><td><button class="btn btn-sm btn-primary">Review</button></td></tr><tr><td>Overtime Claim</td><td>Peter Omondi</td><td><span class="badge bg-warning">Pending</span></td><td><button class="btn btn-sm btn-primary">Review</button></td></tr></tbody></table></div></div>
@endsection

@section('custom-scripts')
    <!-- Your trendChart script from SchoolAdminDashboard.html -->
    <script>
        new Chart(document.getElementById('trendChart'), {
            type: 'line',
            data: {
                labels: ['Week1','Week2','Week3','Week4'],
                datasets: [{ 
                    label: 'Avg Score %', 
                    data: [78,82,85,88], 
                    borderColor: '#e54027', 
                    tension: 0.3 
                }]
            }
        });
    </script>
@endsection