@extends('layouts.app')

@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<style>
    :root {
        --indigo: #4f46e5;
        --indigo-dark: #3730a3;
        --indigo-light: #e0e7ff;
        --red-accent: #ef4444;
        --gray-soft: #f1f5f9;
    }
    .mgr-hero {
        background: linear-gradient(135deg, #4f46e5 0%, #3730a3 60%, #1e1b4b 100%);
        position: relative;
        overflow: hidden;
    }
    .mgr-hero::before {
        content: '';
        position: absolute;
        top: -60px; right: -60px;
        width: 260px; height: 260px;
        background: rgba(255,255,255,0.06);
        border-radius: 50%;
    }
    .mgr-hero::after {
        content: '';
        position: absolute;
        bottom: -40px; left: 40px;
        width: 180px; height: 180px;
        background: rgba(255,255,255,0.04);
        border-radius: 50%;
    }
    .stat-card {
        background: #fff;
        border-radius: 16px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(79,70,229,0.04);
        transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s ease;
    }
    .stat-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 32px rgba(79,70,229,0.12);
    }
    .icon-badge {
        width: 48px; height: 48px;
        border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
    }
    .section-title {
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #64748b;
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 1rem;
    }
    .queue-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 0;
        border-bottom: 1px solid #f1f5f9;
    }
    .queue-item:last-child { border-bottom: none; }
    .avatar-sm {
        width: 32px; height: 32px;
        border-radius: 50%;
        background: linear-gradient(135deg, #4f46e5, #818cf8);
        display: flex; align-items: center; justify-content: center;
        color: #fff; font-size: 0.7rem; font-weight: 700;
        flex-shrink: 0;
    }
    .badge-pill {
        display: inline-flex; align-items: center;
        padding: 2px 10px;
        border-radius: 999px;
        font-size: 0.68rem;
        font-weight: 600;
    }
    .progress-bar-wrap { background: #e2e8f0; border-radius: 999px; height: 8px; overflow: hidden; }
    .progress-bar-fill { height: 100%; border-radius: 999px; transition: width 0.8s cubic-bezier(0.4,0,0.2,1); }
    .quick-action-btn {
        display: flex; flex-direction: column; align-items: center; gap: 8px;
        padding: 18px 12px;
        border-radius: 14px;
        border: 1.5px solid #e2e8f0;
        background: #f8fafc;
        transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1);
        text-decoration: none;
        cursor: pointer;
    }
    .quick-action-btn:hover {
        border-color: #4f46e5;
        background: #eef2ff;
        transform: translateY(-2px) scale(1.04);
        box-shadow: 0 4px 16px rgba(79,70,229,0.12);
    }
    .chart-card {
        background: #fff;
        border-radius: 16px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        padding: 1.5rem;
    }
    .portal-banner {
        background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
        border-radius: 16px;
        padding: 1.5rem 2rem;
        display: flex; align-items: center; justify-content: space-between;
        flex-wrap: wrap; gap: 1rem;
    }
</style>
@endpush

@section('content')
@php
    $totalUsers   = $stats['total_users'] ?? 0;
    $activeUsers  = $stats['active_users'] ?? 0;
    $newWeek      = $stats['new_this_week'] ?? 0;
    $newMonth     = $stats['new_this_month'] ?? 0;
    $totalMembers = $stats['total_members'] ?? 0;
    $totalSessions= $stats['total_training_sessions'] ?? 0;
    $activeSess   = $stats['active_training_sessions'] ?? 0;
    $totalRegs    = $stats['total_registrations'] ?? 0;
    $totalProgs   = $stats['total_programmes'] ?? 0;
    $activeAssign = $stats['active_assignments'] ?? 0;
    $pendMember   = $stats['pending_member_approvals'] ?? 0;
    $pendTraining = $stats['pending_training_registrations'] ?? 0;
    $pendMentor   = $stats['pending_mentorship_applications'] ?? 0;
    $pendLoan     = $stats['pending_loan_applications'] ?? 0;
    $activeRate   = $totalUsers > 0 ? round(($activeUsers/$totalUsers)*100) : 0;
    $memberRate   = $totalUsers > 0 ? round(($totalMembers/$totalUsers)*100) : 0;
    $trendLabels  = $stats['trend_labels'] ?? [];
    $trainTrend   = $stats['training_trend'] ?? [];
    $mentorTrend  = $stats['mentorship_trend'] ?? [];
@endphp

{{-- ═══════════════════════════════════════════════════════════════
     HERO BANNER
═══════════════════════════════════════════════════════════════ --}}
<div class="mgr-hero px-6 py-8 md:py-10">
    <div class="relative z-10 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
            <div class="flex items-center gap-3 mb-2">
                <div class="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
                    <i class="fas fa-user-tie text-white text-lg"></i>
                </div>
                <span class="text-indigo-200 text-sm font-medium uppercase tracking-widest">Manager Dashboard</span>
            </div>
            <h1 class="text-2xl md:text-3xl font-bold text-white">
                Welcome back, {{ auth()->user()->name ?? 'Manager' }}
            </h1>
            <p class="text-indigo-300 text-sm mt-1">
                {{ now()->format('l, d F Y') }} &mdash; Here's your system overview
            </p>
        </div>
        <div class="flex flex-wrap gap-3">
            <a href="{{ route('users.index') }}"
               class="flex items-center gap-2 px-4 py-2 bg-white/15 hover:bg-white/25 text-white text-sm font-medium rounded-xl border border-white/20 transition">
                <i class="fas fa-users text-xs"></i> Manage Users
            </a>
            @can('view reports')
            <a href="{{ route('tickets.index') }}"
               class="flex items-center gap-2 px-4 py-2 bg-white text-indigo-700 text-sm font-semibold rounded-xl hover:bg-indigo-50 transition">
                <i class="fas fa-chart-bar text-xs"></i> Reports
            </a>
            @endcan
        </div>
    </div>
</div>

{{-- ═══════════════════════════════════════════════════════════════
     ROW 1 — PRIMARY KPI CARDS
═══════════════════════════════════════════════════════════════ --}}
<div class="px-6 py-6 space-y-8">

<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
    {{-- Total Users --}}
    <div class="stat-card p-5 flex items-center gap-4">
        <div class="icon-badge bg-indigo-50">
            <i class="fas fa-users text-indigo-600 text-xl"></i>
        </div>
        <div>
            <p class="text-xs text-slate-500 font-semibold uppercase tracking-wide">Total Users</p>
            <p class="text-2xl font-bold text-slate-800">{{ number_format($totalUsers) }}</p>
            <p class="text-xs text-indigo-500 font-medium mt-0.5">
                <i class="fas fa-arrow-up text-[9px]"></i> {{ $newWeek }} this week
            </p>
        </div>
    </div>
    {{-- Active Users --}}
    <div class="stat-card p-5 flex items-center gap-4">
        <div class="icon-badge bg-emerald-50">
            <i class="fas fa-user-check text-emerald-600 text-xl"></i>
        </div>
        <div>
            <p class="text-xs text-slate-500 font-semibold uppercase tracking-wide">Active Users</p>
            <p class="text-2xl font-bold text-slate-800">{{ number_format($activeUsers) }}</p>
            <p class="text-xs text-slate-400 mt-0.5">{{ $activeRate }}% of total</p>
        </div>
    </div>
    {{-- New This Month --}}
    <div class="stat-card p-5 flex items-center gap-4">
        <div class="icon-badge bg-red-50">
            <i class="fas fa-user-plus text-red-500 text-xl"></i>
        </div>
        <div>
            <p class="text-xs text-slate-500 font-semibold uppercase tracking-wide">New This Month</p>
            <p class="text-2xl font-bold text-slate-800">{{ number_format($newMonth) }}</p>
            <p class="text-xs text-slate-400 mt-0.5">{{ $newWeek }} this week</p>
        </div>
    </div>
    {{-- Total Members --}}
    <div class="stat-card p-5 flex items-center gap-4">
        <div class="icon-badge bg-violet-50">
            <i class="fas fa-id-card text-violet-600 text-xl"></i>
        </div>
        <div>
            <p class="text-xs text-slate-500 font-semibold uppercase tracking-wide">Members</p>
            <p class="text-2xl font-bold text-slate-800">{{ number_format($totalMembers) }}</p>
            <p class="text-xs text-slate-400 mt-0.5">{{ $memberRate }}% of users</p>
        </div>
    </div>
</div>

{{-- ═══════════════════════════════════════════════════════════════
     ROW 2 — PENDING APPROVALS + MODULE OVERVIEW
═══════════════════════════════════════════════════════════════ --}}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

    {{-- Pending Approvals Panel --}}
    <div class="stat-card p-6 lg:col-span-1">
        <p class="section-title"><i class="fas fa-clock text-amber-500"></i> Pending Approvals</p>
        <div class="space-y-3">
            @can('approve members')
            <div class="flex items-center justify-between p-3 bg-slate-50 rounded-xl">
                <div class="flex items-center gap-3">
                    <div class="icon-badge bg-green-100 w-9 h-9 rounded-lg">
                        <i class="fas fa-id-card text-green-600 text-sm"></i>
                    </div>
                    <div>
                        <p class="text-sm font-semibold text-slate-700">Membership</p>
                        <p class="text-xs text-slate-400">Applications</p>
                    </div>
                </div>
                <div class="text-right">
                    <p class="text-xl font-bold text-slate-800">{{ $pendMember }}</p>
                    <a href="{{ route('admin.members.applications.index') }}" class="text-xs text-indigo-600 hover:underline font-medium">Review →</a>
                </div>
            </div>
            @endcan
            @can('approve training registrations')
            <div class="flex items-center justify-between p-3 bg-slate-50 rounded-xl">
                <div class="flex items-center gap-3">
                    <div class="icon-badge bg-blue-100 w-9 h-9 rounded-lg">
                        <i class="fas fa-graduation-cap text-blue-600 text-sm"></i>
                    </div>
                    <div>
                        <p class="text-sm font-semibold text-slate-700">Training</p>
                        <p class="text-xs text-slate-400">Registrations</p>
                    </div>
                </div>
                <div class="text-right">
                    <p class="text-xl font-bold text-slate-800">{{ $pendTraining }}</p>
                    <a href="{{ route('training.registrations.pending') }}" class="text-xs text-indigo-600 hover:underline font-medium">Review →</a>
                </div>
            </div>
            @endcan
            @can('approve mentorship applications')
            <div class="flex items-center justify-between p-3 bg-slate-50 rounded-xl">
                <div class="flex items-center gap-3">
                    <div class="icon-badge bg-purple-100 w-9 h-9 rounded-lg">
                        <i class="fas fa-hands-helping text-purple-600 text-sm"></i>
                    </div>
                    <div>
                        <p class="text-sm font-semibold text-slate-700">Mentorship</p>
                        <p class="text-xs text-slate-400">Applications</p>
                    </div>
                </div>
                <div class="text-right">
                    <p class="text-xl font-bold text-slate-800">{{ $pendMentor }}</p>
                    <a href="{{ route('mentorship.applications.index') }}" class="text-xs text-indigo-600 hover:underline font-medium">Review →</a>
                </div>
            </div>
            @endcan
            @can('approve loan applications')
            <div class="flex items-center justify-between p-3 bg-slate-50 rounded-xl">
                <div class="flex items-center gap-3">
                    <div class="icon-badge bg-amber-100 w-9 h-9 rounded-lg">
                        <i class="fas fa-hand-holding-usd text-amber-600 text-sm"></i>
                    </div>
                    <div>
                        <p class="text-sm font-semibold text-slate-700">Loans</p>
                        <p class="text-xs text-slate-400">Applications</p>
                    </div>
                </div>
                <div class="text-right">
                    <p class="text-xl font-bold text-slate-800">{{ $pendLoan }}</p>
                    <a href="#" class="text-xs text-indigo-600 hover:underline font-medium">Review →</a>
                </div>
            </div>
            @endcan
        </div>
    </div>

    {{-- Module Overview --}}
    <div class="stat-card p-6 lg:col-span-2">
        <p class="section-title"><i class="fas fa-layer-group text-indigo-500"></i> Module Overview</p>
        <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
            <div class="bg-indigo-50 rounded-xl p-4 text-center border border-indigo-100">
                <i class="fas fa-chalkboard-user text-indigo-500 text-2xl mb-2"></i>
                <p class="text-2xl font-bold text-slate-800">{{ number_format($totalSessions) }}</p>
                <p class="text-xs text-slate-500 mt-0.5">Training Sessions</p>
                <span class="badge-pill bg-indigo-100 text-indigo-700 mt-1">{{ $activeSess }} scheduled</span>
            </div>
            <div class="bg-slate-50 rounded-xl p-4 text-center border border-slate-100">
                <i class="fas fa-clipboard-list text-slate-500 text-2xl mb-2"></i>
                <p class="text-2xl font-bold text-slate-800">{{ number_format($totalRegs) }}</p>
                <p class="text-xs text-slate-500 mt-0.5">Registrations</p>
                <span class="badge-pill bg-slate-200 text-slate-600 mt-1">Training</span>
            </div>
            <div class="bg-violet-50 rounded-xl p-4 text-center border border-violet-100">
                <i class="fas fa-people-group text-violet-500 text-2xl mb-2"></i>
                <p class="text-2xl font-bold text-slate-800">{{ number_format($totalProgs) }}</p>
                <p class="text-xs text-slate-500 mt-0.5">Programmes</p>
                <span class="badge-pill bg-violet-100 text-violet-700 mt-1">Mentorship</span>
            </div>
            <div class="bg-teal-50 rounded-xl p-4 text-center border border-teal-100">
                <i class="fas fa-link text-teal-500 text-2xl mb-2"></i>
                <p class="text-2xl font-bold text-slate-800">{{ number_format($activeAssign) }}</p>
                <p class="text-xs text-slate-500 mt-0.5">Active Assignments</p>
                <span class="badge-pill bg-teal-100 text-teal-700 mt-1">Mentorship</span>
            </div>
            <div class="bg-red-50 rounded-xl p-4 text-center border border-red-100">
                <i class="fas fa-id-card text-red-500 text-2xl mb-2"></i>
                <p class="text-2xl font-bold text-slate-800">{{ number_format($totalMembers) }}</p>
                <p class="text-xs text-slate-500 mt-0.5">Total Members</p>
                <span class="badge-pill bg-red-100 text-red-600 mt-1">Registered</span>
            </div>
            <div class="bg-amber-50 rounded-xl p-4 text-center border border-amber-100">
                <i class="fas fa-users text-amber-500 text-2xl mb-2"></i>
                <p class="text-2xl font-bold text-slate-800">{{ number_format($totalUsers) }}</p>
                <p class="text-xs text-slate-500 mt-0.5">Total Users</p>
                <span class="badge-pill bg-amber-100 text-amber-700 mt-1">{{ $activeRate }}% active</span>
            </div>
        </div>
    </div>
</div>

{{-- ═══════════════════════════════════════════════════════════════
     ROW 3 — PROGRESS BARS + TREND CHART
═══════════════════════════════════════════════════════════════ --}}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

    {{-- User Engagement Progress --}}
    <div class="stat-card p-6">
        <p class="section-title"><i class="fas fa-heart-pulse text-red-500"></i> User Engagement</p>
        <div class="space-y-5">
            @php
                $trainingRate = $totalUsers > 0 ? min(round(($totalRegs/$totalUsers)*100), 100) : 0;
                $mentorRate   = $totalUsers > 0 ? min(round(($activeAssign/$totalUsers)*100), 100) : 0;
            @endphp
            <div>
                <div class="flex justify-between text-xs text-slate-500 mb-1.5">
                    <span class="font-medium">Active Users</span>
                    <span class="font-bold text-slate-700">{{ $activeUsers }} / {{ $totalUsers }} ({{ $activeRate }}%)</span>
                </div>
                <div class="progress-bar-wrap">
                    <div class="progress-bar-fill bg-indigo-500" style="width:{{ $activeRate }}%"></div>
                </div>
            </div>
            <div>
                <div class="flex justify-between text-xs text-slate-500 mb-1.5">
                    <span class="font-medium">Membership Coverage</span>
                    <span class="font-bold text-slate-700">{{ $totalMembers }} / {{ $totalUsers }} ({{ $memberRate }}%)</span>
                </div>
                <div class="progress-bar-wrap">
                    <div class="progress-bar-fill bg-violet-500" style="width:{{ $memberRate }}%"></div>
                </div>
            </div>
            <div>
                <div class="flex justify-between text-xs text-slate-500 mb-1.5">
                    <span class="font-medium">Training Engagement</span>
                    <span class="font-bold text-slate-700">{{ $totalRegs }} registrations</span>
                </div>
                <div class="progress-bar-wrap">
                    <div class="progress-bar-fill bg-blue-500" style="width:{{ $trainingRate }}%"></div>
                </div>
            </div>
            <div>
                <div class="flex justify-between text-xs text-slate-500 mb-1.5">
                    <span class="font-medium">Mentorship Reach</span>
                    <span class="font-bold text-slate-700">{{ $activeAssign }} active pairs</span>
                </div>
                <div class="progress-bar-wrap">
                    <div class="progress-bar-fill bg-teal-500" style="width:{{ $mentorRate }}%"></div>
                </div>
            </div>
            <div>
                <div class="flex justify-between text-xs text-slate-500 mb-1.5">
                    <span class="font-medium">Pending Approvals</span>
                    @php $totalPend = $pendMember + $pendTraining + $pendMentor; $pendRate = $totalUsers > 0 ? min(round(($totalPend/$totalUsers)*100),100) : 0; @endphp
                    <span class="font-bold text-slate-700">{{ $totalPend }} pending</span>
                </div>
                <div class="progress-bar-wrap">
                    <div class="progress-bar-fill bg-amber-400" style="width:{{ $pendRate }}%"></div>
                </div>
            </div>
        </div>
    </div>

    {{-- 12-Week Trend Chart --}}
    <div class="stat-card p-6">
        <p class="section-title"><i class="fas fa-chart-line text-indigo-500"></i> 12-Week Activity Trend</p>
        <div class="relative h-56">
            <canvas id="mgrTrendChart"
                data-labels="{{ json_encode($trendLabels) }}"
                data-training="{{ json_encode($trainTrend) }}"
                data-mentorship="{{ json_encode($mentorTrend) }}">
            </canvas>
        </div>
        <div class="flex items-center gap-6 mt-3 text-xs text-slate-500">
            <span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-full bg-indigo-500 inline-block"></span> Training Registrations</span>
            <span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-full bg-violet-400 inline-block"></span> Mentorship Assignments</span>
        </div>
    </div>
</div>

{{-- ═══════════════════════════════════════════════════════════════
     ROW 4 — APPROVAL QUEUES
═══════════════════════════════════════════════════════════════ --}}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

    @can('approve members')
    <div class="stat-card p-6">
        <p class="section-title"><i class="fas fa-id-card text-green-500"></i> Membership Queue</p>
        @forelse($stats['pending_member_queue'] ?? collect() as $item)
        <div class="queue-item">
            <div class="avatar-sm">{{ strtoupper(substr($item->user?->name ?? 'U', 0, 1)) }}</div>
            <div class="flex-1 min-w-0">
                <p class="text-sm font-medium text-slate-700 truncate">{{ $item->user?->name ?? 'Unknown' }}</p>
                <p class="text-xs text-slate-400">{{ $item->created_at?->diffForHumans() }}</p>
            </div>
            <span class="badge-pill bg-amber-100 text-amber-700">Pending</span>
        </div>
        @empty
        <div class="flex flex-col items-center justify-center py-8 text-slate-400">
            <i class="fas fa-check-circle text-3xl text-green-300 mb-2"></i>
            <p class="text-sm">All clear!</p>
        </div>
        @endforelse
    </div>
    @endcan

    @can('approve training registrations')
    <div class="stat-card p-6">
        <p class="section-title"><i class="fas fa-graduation-cap text-blue-500"></i> Training Queue</p>
        @forelse($stats['pending_training_queue'] ?? collect() as $item)
        <div class="queue-item">
            <div class="avatar-sm" style="background: linear-gradient(135deg,#3b82f6,#60a5fa)">{{ strtoupper(substr($item->user?->name ?? 'U', 0, 1)) }}</div>
            <div class="flex-1 min-w-0">
                <p class="text-sm font-medium text-slate-700 truncate">{{ $item->user?->name ?? 'Unknown' }}</p>
                <p class="text-xs text-slate-400 truncate">{{ $item->trainingPackage?->name ?? 'N/A' }}</p>
            </div>
            <span class="badge-pill bg-blue-100 text-blue-700">Pending</span>
        </div>
        @empty
        <div class="flex flex-col items-center justify-center py-8 text-slate-400">
            <i class="fas fa-check-circle text-3xl text-green-300 mb-2"></i>
            <p class="text-sm">All clear!</p>
        </div>
        @endforelse
    </div>
    @endcan

    @can('approve mentorship applications')
    <div class="stat-card p-6">
        <p class="section-title"><i class="fas fa-hands-helping text-purple-500"></i> Mentorship Queue</p>
        @forelse($stats['pending_mentorship_queue'] ?? collect() as $item)
        <div class="queue-item">
            <div class="avatar-sm" style="background: linear-gradient(135deg,#8b5cf6,#a78bfa)">{{ strtoupper(substr($item->user?->name ?? 'U', 0, 1)) }}</div>
            <div class="flex-1 min-w-0">
                <p class="text-sm font-medium text-slate-700 truncate">{{ $item->user?->name ?? 'Unknown' }}</p>
                <p class="text-xs text-slate-400 truncate">{{ $item->programme?->name ?? 'N/A' }}</p>
            </div>
            <span class="badge-pill bg-purple-100 text-purple-700">Pending</span>
        </div>
        @empty
        <div class="flex flex-col items-center justify-center py-8 text-slate-400">
            <i class="fas fa-check-circle text-3xl text-green-300 mb-2"></i>
            <p class="text-sm">All clear!</p>
        </div>
        @endforelse
    </div>
    @endcan

</div>

{{-- ═══════════════════════════════════════════════════════════════
     ROW 5 — QUICK ACTIONS
═══════════════════════════════════════════════════════════════ --}}
<div class="stat-card p-6">
    <p class="section-title"><i class="fas fa-bolt text-amber-500"></i> Quick Actions</p>
    <div class="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-6 gap-3">
        <a href="{{ route('users.index') }}" class="quick-action-btn">
            <i class="fas fa-users text-2xl text-indigo-500"></i>
            <span class="text-xs text-slate-600 font-medium text-center">View Users</span>
        </a>
        @can('approve members')
        <a href="{{ route('admin.members.applications.index') }}" class="quick-action-btn">
            <i class="fas fa-id-card text-2xl text-green-500"></i>
            <span class="text-xs text-slate-600 font-medium text-center">Membership</span>
        </a>
        @endcan
        @can('approve training registrations')
        <a href="{{ route('training.registrations.pending') }}" class="quick-action-btn">
            <i class="fas fa-graduation-cap text-2xl text-blue-500"></i>
            <span class="text-xs text-slate-600 font-medium text-center">Training</span>
        </a>
        @endcan
        @can('approve mentorship applications')
        <a href="{{ route('mentorship.applications.index') }}" class="quick-action-btn">
            <i class="fas fa-hands-helping text-2xl text-purple-500"></i>
            <span class="text-xs text-slate-600 font-medium text-center">Mentorship</span>
        </a>
        @endcan
        <a href="{{ route('tickets.index') }}" class="quick-action-btn">
            <i class="fas fa-bell text-2xl text-red-500"></i>
            <span class="text-xs text-slate-600 font-medium text-center">Notifications</span>
        </a>
        <a href="{{ route('organization.details.index') }}" class="quick-action-btn">
            <i class="fas fa-cog text-2xl text-amber-500"></i>
            <span class="text-xs text-slate-600 font-medium text-center">Settings</span>
        </a>
    </div>
</div>

{{-- ═══════════════════════════════════════════════════════════════
     SELF-PACED PORTAL BANNER
═══════════════════════════════════════════════════════════════ --}}
@can('view self-paced courses')
<div class="portal-banner">
    <div class="flex items-center gap-4">
        <div class="w-14 h-14 bg-white/20 rounded-2xl flex items-center justify-center flex-shrink-0">
            <i class="fas fa-graduation-cap text-white text-2xl"></i>
        </div>
        <div>
            <h3 class="text-lg font-bold text-white">Self-Paced Learning Portal</h3>
            <p class="text-indigo-200 text-sm">Manage courses, exams, enrollments and certificates</p>
        </div>
    </div>
    <a href="{{ route('self-paced.dashboard.index') }}"
       class="flex items-center gap-2 px-5 py-2.5 bg-white text-indigo-700 font-semibold rounded-xl hover:bg-indigo-50 transition text-sm flex-shrink-0">
        <i class="fas fa-arrow-right"></i> Open Portal
    </a>
</div>
@endcan

</div>{{-- end px-6 --}}
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const canvas = document.getElementById('mgrTrendChart');
    if (!canvas) return;
    const labels   = JSON.parse(canvas.dataset.labels   || '[]');
    const training = JSON.parse(canvas.dataset.training  || '[]');
    const mentor   = JSON.parse(canvas.dataset.mentorship|| '[]');
    new Chart(canvas, {
        type: 'line',
        data: {
            labels,
            datasets: [
                {
                    label: 'Training Registrations',
                    data: training,
                    borderColor: '#4f46e5',
                    backgroundColor: 'rgba(79,70,229,0.08)',
                    borderWidth: 2.5,
                    pointRadius: 3,
                    pointBackgroundColor: '#4f46e5',
                    tension: 0.4,
                    fill: true,
                },
                {
                    label: 'Mentorship Assignments',
                    data: mentor,
                    borderColor: '#8b5cf6',
                    backgroundColor: 'rgba(139,92,246,0.06)',
                    borderWidth: 2.5,
                    pointRadius: 3,
                    pointBackgroundColor: '#8b5cf6',
                    tension: 0.4,
                    fill: true,
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { display: false } },
            scales: {
                x: { grid: { display: false }, ticks: { font: { size: 10 }, color: '#94a3b8', maxTicksLimit: 6 } },
                y: { grid: { color: '#f1f5f9' }, ticks: { font: { size: 10 }, color: '#94a3b8' }, beginAtZero: true }
            }
        }
    });
});
</script>
@endpush
