@extends('layouts.app')

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

@section('sidebar-menu')
    <li class="nav-item active"><a href="#"><i class="fas fa-tachometer-alt"></i><span>Dashboard</span></a></li>
    <li class="nav-item"><a href="#"><i class="fas fa-building"></i><span>Schools</span></a></li>
    <li class="nav-item"><a href="#"><i class="fas fa-users"></i><span>All Users</span></a></li>
    <li class="nav-item"><a href="#"><i class="fas fa-chart-line"></i><span>Analytics</span></a></li>
    <li class="nav-item"><a href="#"><i class="fas fa-credit-card"></i><span>Subscriptions</span></a></li>
    <li class="nav-item"><a href="#"><i class="fas fa-cog"></i><span>System Settings</span></a></li>
    <li class="nav-item"><a href="#"><i class="fas fa-flag-checkered"></i><span>Reports</span></a></li>
@endsection

@section('sidebar-footer')
    <p>© 2026 Institution Axis</p>
@endsection

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

@section('navbar-right')
    <div class="notification-icon"><i class="fas fa-bell"></i><span class="badge-notify">3</span></div>
    <div class="profile-dropdown dropdown">
        <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown">
            <img src="https://ui-avatars.com/api/?background=2d4ca7&color=fff&name=Super+Admin" alt="avatar" class="avatar-sm">
            <span>John K.</span> <i class="fas fa-chevron-down small"></i>
        </a>
        <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="#"><i class="fas fa-user-circle"></i> My Profile</a></li>
            <li><a class="dropdown-item" href="#"><i class="fas fa-cog"></i> Settings</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item text-danger" href="#"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
        </ul>
    </div>
@endsection

@section('content')
    <!-- Stat Cards -->
    <div class="row g-4">
        <div class="col-lg-3 col-md-6">
            <div class="stat-card">
                <div class="stat-icon"><i class="fas fa-school"></i></div>
                <div class="stat-info">
                    <h3>{{ $totalSchools }}</h3>
                    <p>Total Schools</p>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="stat-card">
                <div class="stat-icon"><i class="fas fa-chalkboard-user"></i></div>
                <div class="stat-info">
                    <h3>{{ $totalTeachers }}</h3>
                    <p>Teachers</p>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="stat-card">
                <div class="stat-icon"><i class="fas fa-user-graduate"></i></div>
                <div class="stat-info">
                    <h3>{{ number_format($totalStudents) }}</h3>
                    <p>Students</p>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="stat-card">
                <div class="stat-icon"><i class="fas fa-dollar-sign"></i></div>
                <div class="stat-info">
                    <h3>KES {{ number_format($totalRevenue) }}</h3>
                    <p>Revenue (YTD)</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts + Recent Activities -->
    <div class="row g-4 mt-4">
        <div class="col-lg-7">
            <div class="card shadow-sm border-0 rounded-4">
                <div class="card-header bg-white border-0 pt-3">
                    <h5 class="mb-0"><i class="fas fa-chart-simple me-2"></i>Schools Performance Overview</h5>
                </div>
                <div class="card-body">
                    <canvas id="schoolChart" height="200"></canvas>
                </div>
            </div>
        </div>

        <div class="col-lg-5">
            <div class="card shadow-sm border-0 rounded-4">
                <div class="card-header bg-white border-0 pt-3">
                    <h5 class="mb-0"><i class="fas fa-clock"></i> Recent Schools Added</h5>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        @foreach($recentSchools as $school)
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span><i class="fas fa-school text-success"></i> {{ $school->name }}</span>
                            <span class="small text-muted">{{ $school->created_at->diffForHumans() }}</span>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Schools Table -->
    <div class="row g-4 mt-4">
        <div class="col-12">
            <div class="card shadow-sm border-0 rounded-4">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="fas fa-table-list"></i> Registered Institutions</h5>
                    <a href="{{ route('superadmin.schools.index') }}" class="btn btn-sm btn-primary">
                        Manage All Schools
                    </a>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>School Name</th>
                                    <th>Type</th>
                                    <th>Students</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($recentSchools as $school)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $school->name }}</td>
                                    <td>{{ ucfirst($school->type) }}</td>
                                    <td>{{ number_format($school->student_count) }}</td>
                                    <td>
                                        <span class="badge bg-{{ $school->status === 'active' ? 'success' : 'warning' }}">
                                            {{ ucfirst($school->status) }}
                                        </span>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('custom-scripts')
    <script>
        const ctx = document.getElementById('schoolChart')?.getContext('2d');
        if (ctx) {
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['Primary', 'Secondary', 'College', 'Mixed'],
                    datasets: [{
                        label: 'Number of Schools',
                        data: [
                            {{ $schoolsByType['primary'] ?? 0 }},
                            {{ $schoolsByType['secondary'] ?? 0 }},
                            {{ $schoolsByType['college'] ?? 0 }},
                            {{ $schoolsByType['mixed'] ?? 0 }}
                        ],
                        backgroundColor: '#2d4ca7',
                        borderRadius: 6
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    scales: { y: { beginAtZero: true } }
                }
            });
        }
        // Table search
        document.getElementById('schoolSearch').addEventListener('keyup', function() {
            let filter = this.value.toLowerCase();
            let rows = document.querySelectorAll('#schoolTable tbody tr');
            rows.forEach(row => { row.style.display = row.innerText.toLowerCase().includes(filter) ? '' : 'none'; });
        });
    </script>
@endsection