@extends('layouts.app')
@section('title', 'Dashboard')
@section('page-title', 'Dashboard')

@section('sidebar-nav')
<div class="nav-section">Main</div>
<div class="nav-item"><a href="{{ route('admin.dashboard') }}"><i class="bi bi-grid"></i> Dashboard</a></div>
<div class="nav-section">Academic</div>
<div class="nav-item"><a href="{{ route('admin.students.index') }}"><i class="bi bi-people"></i> Students</a></div>
<div class="nav-item"><a href="{{ route('admin.exams.index') }}"><i class="bi bi-journal-text"></i> Exams & Results</a></div>
<div class="nav-item"><a href="{{ route('admin.attendance.index') }}"><i class="bi bi-calendar-check"></i> Attendance</a></div>
<div class="nav-section">Finance</div>
<div class="nav-item"><a href="{{ route('admin.fees.structure') }}"><i class="bi bi-cash-stack"></i> Fee Structure</a></div>
<div class="nav-item"><a href="{{ route('admin.fees.invoices') }}"><i class="bi bi-receipt"></i> Invoices & Payments</a></div>
<div class="nav-section">System</div>
<div class="nav-item"><a href="{{ route('admin.users.index') }}"><i class="bi bi-person-gear"></i> Users</a></div>
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1>Welcome back, {{ auth()->user()->name }}</h1>
        <p>{{ now()->format('l, d F Y') }} &mdash; {{ auth()->user()->school->name ?? 'EduSmart' }}</p>
    </div>
</div>

<div class="grid grid-4" style="margin-bottom:24px;">
    <div class="stat-card">
        <div class="stat-icon green"><i class="bi bi-people-fill"></i></div>
        <div class="stat-info">
            <h3>{{ number_format($stats['students']) }}</h3>
            <p>Total Students</p>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon blue"><i class="bi bi-person-badge"></i></div>
        <div class="stat-info">
            <h3>{{ number_format($stats['teachers']) }}</h3>
            <p>Teachers</p>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon amber"><i class="bi bi-cash"></i></div>
        <div class="stat-info">
            <h3>KES {{ number_format($stats['fee_collected']) }}</h3>
            <p>Fees Collected</p>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon red"><i class="bi bi-person-x"></i></div>
        <div class="stat-info">
            <h3>{{ number_format($stats['absent_today']) }}</h3>
            <p>Absent Today</p>
        </div>
    </div>
</div>

<div class="grid grid-2">
    <div class="card">
        <div class="card-header">
            <h5><i class="bi bi-bar-chart"></i> Fee Collection ({{ now()->year }})</h5>
        </div>
        <div class="card-body">
            <canvas id="feeChart" height="200"></canvas>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <h5><i class="bi bi-activity"></i> Recent Activity</h5>
        </div>
        <div class="card-body" style="padding:0;">
            @forelse($recentLogs as $log)
            <div style="padding:12px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;">
                <div class="avatar" style="width:32px;height:32px;font-size:12px;background:var(--primary-light);color:var(--primary);">
                    {{ strtoupper(substr($log->user?->name ?? 'S', 0, 1)) }}
                </div>
                <div style="flex:1;">
                    <div style="font-size:13px;font-weight:500;">{{ $log->user?->name ?? 'System' }}</div>
                    <div style="font-size:12px;color:var(--gray);">{{ ucfirst($log->action) }} {{ $log->model }} &bull; {{ $log->created_at->diffForHumans() }}</div>
                </div>
            </div>
            @empty
            <div style="padding:20px;text-align:center;color:var(--gray);font-size:14px;">No recent activity</div>
            @endforelse
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
const feeData = @json($feeByMonth);
const labels = months.map((m, i) => m);
const values = months.map((m, i) => feeData[i+1] || 0);

new Chart(document.getElementById('feeChart'), {
    type: 'bar',
    data: {
        labels,
        datasets: [{
            label: 'KES Collected',
            data: values,
            backgroundColor: 'rgba(26,127,90,.7)',
            borderRadius: 6,
        }]
    },
    options: {
        responsive: true,
        plugins: { legend: { display: false } },
        scales: { y: { beginAtZero: true, ticks: { callback: v => 'KES ' + v.toLocaleString() } } }
    }
});
</script>
@endpush
@endsection
