@extends('layouts.admin')

@section('title', 'Dashboard')
@section('heading', 'Dashboard')

@section('content')
    <div class="row g-3 mb-4">
        <div class="col-sm-6 col-xl-3">
            <div class="card">
                <div class="card-body">
                    <div class="text-muted small">Universities</div>
                    <div class="fs-3 fw-semibold">{{ $stats['universities'] }}</div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card">
                <div class="card-body">
                    <div class="text-muted small">Courses</div>
                    <div class="fs-3 fw-semibold">{{ $stats['courses'] }}</div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card">
                <div class="card-body">
                    <div class="text-muted small">Users</div>
                    <div class="fs-3 fw-semibold">{{ $stats['students'] }}</div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card">
                <div class="card-body">
                    <div class="text-muted small">Applications</div>
                    <div class="fs-3 fw-semibold">{{ $stats['applications'] }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-lg-5">
            <div class="card h-100">
                <div class="card-header bg-transparent fw-semibold">Overview</div>
                <div class="card-body">
                    <canvas id="statsChart" height="220"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-7">
            <div class="card h-100">
                <div class="card-header bg-transparent d-flex align-items-center">
                    <span class="fw-semibold">Recent applications</span>
                    @can('manage applications')
                        <a href="{{ route('admin.applications.index') }}" class="btn btn-sm btn-outline-primary ms-auto">View all</a>
                    @endcan
                </div>
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                        <tr>
                            <th>Applicant</th>
                            <th>Course</th>
                            <th>Status</th>
                            <th>Date</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($recentApplications as $app)
                            <tr>
                                <td>
                                    <div class="fw-medium">{{ $app->user->name }}</div>
                                    <div class="small text-muted">{{ $app->user->email }}</div>
                                </td>
                                <td>
                                    <div class="fw-medium">{{ $app->course->title }}</div>
                                    <div class="small text-muted">{{ $app->course->university->name }}</div>
                                </td>
                                <td><span class="badge text-bg-secondary text-capitalize">{{ $app->status }}</span></td>
                                <td class="small text-muted">{{ $app->created_at->diffForHumans() }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center text-muted py-4">No applications yet.</td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
    <script>
        const ctx = document.getElementById('statsChart');
        if (ctx) {
            new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: @json($chart['labels']),
                    datasets: [{
                        data: @json($chart['values']),
                        backgroundColor: ['#6366f1', '#22c55e', '#f97316', '#0ea5e9'],
                        borderWidth: 0,
                    }]
                },
                options: {plugins: {legend: {position: 'bottom'}}}
            });
        }
    </script>
@endpush