@extends('Component.layout')

@section('title', 'Super Admin Dashboard - Iqra')
@section('breadcrumb', 'Super Admin Dashboard')

@section('content')
<div class="space-y-8">
    
    <!-- Top Greeting and Actions -->
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div>
            <h1 class="text-3xl font-extrabold tracking-tight text-slate-800">Dashboard</h1>
            <p class="text-xs text-slate-500 font-medium mt-1">Plan, prioritize, and accomplish your tasks with ease.</p>
        </div>
        <div class="flex items-center gap-2">
            <button onclick="openAdminModal()" class="px-4 py-2.5 bg-emerald-700 hover:bg-emerald-600 text-white text-xs font-bold rounded-full transition-all flex items-center gap-2 shadow-lg shadow-emerald-700/10">
                <svg class="w-4 h-4 fill-none stroke-current" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
                Add Admin / Teacher
            </button>
            <button class="px-4 py-2.5 bg-white border border-slate-200 text-slate-700 hover:bg-slate-50 text-xs font-bold rounded-full transition-all flex items-center gap-2 shadow-sm">
                Import Data
            </button>
        </div>
    </div>

    <!-- Admin Stats Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Stat Card 1: Total Students -->
        <a href="{{ route('superadmin.students.index') }}" class="block rounded-3xl bg-emerald-700 p-6 text-white relative overflow-hidden shadow-xl shadow-emerald-700/15 hover:opacity-90 hover:scale-[1.02] transition-all cursor-pointer">
            <div class="flex justify-between items-start mb-4">
                <span class="text-xs font-bold tracking-tight text-emerald-100 uppercase">Total Students</span>
                <span class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center text-white">
                    <svg class="w-4 h-4 fill-none stroke-current" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" /></svg>
                </span>
            </div>
            <div class="text-4xl font-extrabold tracking-tight mb-2">{{ $totalStudents }}</div>
            <div class="inline-flex items-center gap-1 bg-emerald-800/50 rounded-lg px-2 py-1 text-[10px] font-bold text-emerald-300">
                Registered across all classes
            </div>
        </a>

        <!-- Stat Card 2: Total Tests -->
        <a href="{{ route('superadmin.exams.index') }}" class="block rounded-3xl bg-white border border-slate-200 p-6 text-slate-800 relative overflow-hidden shadow-sm hover:shadow-md hover:border-slate-300 hover:scale-[1.02] transition-all cursor-pointer">
            <div class="flex justify-between items-start mb-4">
                <span class="text-xs font-bold tracking-tight text-slate-400 uppercase">Total Tests</span>
                <span class="w-8 h-8 rounded-full border border-slate-200 flex items-center justify-center text-slate-600 bg-slate-50">
                    <svg class="w-4 h-4 fill-none stroke-current" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg>
                </span>
            </div>
            <div class="text-4xl font-extrabold tracking-tight mb-2 text-slate-800">{{ $totalExams }}</div>
            <div class="inline-flex items-center gap-1 bg-slate-50 border border-slate-100 rounded-lg px-2 py-1 text-[10px] font-bold text-slate-500">
                Created by all teachers
            </div>
        </a>

        <!-- Stat Card 3: Total Teachers -->
        <a href="#accounts" class="block rounded-3xl bg-white border border-slate-200 p-6 text-slate-800 relative overflow-hidden shadow-sm hover:shadow-md hover:border-slate-300 hover:scale-[1.02] transition-all cursor-pointer">
            <div class="flex justify-between items-start mb-4">
                <span class="text-xs font-bold tracking-tight text-slate-400 uppercase">Total Teachers</span>
                <span class="w-8 h-8 rounded-full border border-slate-200 flex items-center justify-center text-slate-600 bg-slate-50">
                    <svg class="w-4 h-4 fill-none stroke-current" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 14l9-5-9-5-9 5 9 5z"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"/></svg>
                </span>
            </div>
            <div class="text-4xl font-extrabold tracking-tight mb-2 text-slate-800">{{ $totalTeachers }}</div>
            <div class="inline-flex items-center gap-1 bg-slate-50 border border-slate-100 rounded-lg px-2 py-1 text-[10px] font-bold text-slate-500">
                Staff registered in system
            </div>
        </a>
    </div>

    <!-- Analytics & Widgets Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        <!-- Class-wise Performance Chart Panel -->
        <div class="lg:col-span-2 bg-white border border-slate-200 rounded-3xl p-6 shadow-sm">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h3 class="text-sm font-bold text-slate-800">Class Performance Overview</h3>
                    <p class="text-[10px] font-semibold text-slate-400 mt-0.5">Average marks percentage by class</p>
                </div>
            </div>
            <div id="performanceChart" class="w-full h-[250px]"></div>
        </div>

        <!-- Reminders Panel -->
        <div class="bg-white border border-slate-200 rounded-3xl p-6 shadow-sm flex flex-col justify-between">
            <div>
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-sm font-bold text-slate-800">Reminders</h3>
                </div>
                <div class="mt-4 space-y-1">
                    <h4 class="text-base font-extrabold text-slate-800 leading-snug">Meeting with Arc Company</h4>
                    <p class="text-[10px] font-semibold text-slate-400 mt-1">Time : 02.00 pm - 04.00 pm</p>
                </div>
            </div>
            
            <button class="w-full py-3 bg-emerald-950 hover:bg-emerald-900 text-white font-bold rounded-2xl transition-all flex items-center justify-center gap-2 mt-6">
                <svg class="w-4 h-4 fill-current text-emerald-400" viewBox="0 0 24 24">
                    <path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/>
                </svg>
                Start Meeting
            </button>
        </div>
    </div>

    <!-- Lower Section Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        <!-- Team Collaboration Section -->
        <div class="bg-white border border-slate-200 rounded-3xl p-6 shadow-sm">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-sm font-bold text-slate-800">Team Collaboration</h3>
                <button class="px-3 py-1.5 border border-slate-200 hover:bg-slate-50 text-slate-700 text-[10px] font-bold rounded-full transition-all">
                    + Add Member
                </button>
            </div>
            
            <div class="space-y-4">
                <!-- Member 1 -->
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <img class="w-9 h-9 rounded-full object-cover shadow-sm bg-slate-50" src="https://api.dicebear.com/7.x/adventurer/svg?seed=Alexandra" alt="member">
                        <div>
                            <div class="text-xs font-bold text-slate-800">Alexandra Deff</div>
                            <div class="text-[9px] font-semibold text-slate-400">Working on <span class="text-slate-600">Github Project Repository</span></div>
                        </div>
                    </div>
                    <span class="px-2 py-0.5 bg-emerald-50 text-emerald-700 border border-emerald-100 rounded-md text-[8px] font-bold">Completed</span>
                </div>

                <!-- Member 2 -->
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <img class="w-9 h-9 rounded-full object-cover shadow-sm bg-slate-50" src="https://api.dicebear.com/7.x/adventurer/svg?seed=Edwin" alt="member">
                        <div>
                            <div class="text-xs font-bold text-slate-800">Edwin Adenike</div>
                            <div class="text-[9px] font-semibold text-slate-400">Working on <span class="text-slate-600">Integrate User Authentication System</span></div>
                        </div>
                    </div>
                    <span class="px-2 py-0.5 bg-amber-50 text-amber-700 border border-amber-100 rounded-md text-[8px] font-bold">In Progress</span>
                </div>

                <!-- Member 3 -->
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <img class="w-9 h-9 rounded-full object-cover shadow-sm bg-slate-50" src="https://api.dicebear.com/7.x/adventurer/svg?seed=Isaac" alt="member">
                        <div>
                            <div class="text-xs font-bold text-slate-800">Isaac Oluwatenilorun</div>
                            <div class="text-[9px] font-semibold text-slate-400">Working on <span class="text-slate-600">Develop Search and Filter Functionality</span></div>
                        </div>
                    </div>
                    <span class="px-2 py-0.5 bg-red-50 text-red-700 border border-red-100 rounded-md text-[8px] font-bold">Pending</span>
                </div>

                <!-- Member 4 -->
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <img class="w-9 h-9 rounded-full object-cover shadow-sm bg-slate-50" src="https://api.dicebear.com/7.x/adventurer/svg?seed=David" alt="member">
                        <div>
                            <div class="text-xs font-bold text-slate-800">David Oshodi</div>
                            <div class="text-[9px] font-semibold text-slate-400">Working on <span class="text-slate-600">Responsive Layout for Homepage</span></div>
                        </div>
                    </div>
                    <span class="px-2 py-0.5 bg-amber-50 text-amber-700 border border-amber-100 rounded-md text-[8px] font-bold">In Progress</span>
                </div>
            </div>
        </div>

        <!-- Recent Announcements Panel -->
        <div class="bg-white border border-slate-200 rounded-3xl p-6 shadow-sm flex flex-col justify-between">
            <div>
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-sm font-bold text-slate-800">Recent Announcements</h3>
                </div>
                <div class="space-y-3">
                    @forelse($announcements as $announcement)
                        <div class="bg-slate-50 rounded-2xl p-4 border border-slate-100">
                            <div class="flex justify-between items-start mb-1">
                                <h4 class="text-xs font-bold text-slate-800 leading-snug">{{ $announcement->title }}</h4>
                                <span class="px-1.5 py-0.5 rounded-md text-[8px] font-extrabold uppercase {{ $announcement->type === 'general' ? 'bg-indigo-100 text-indigo-700' : 'bg-emerald-100 text-emerald-700' }}">
                                    {{ $announcement->type === 'general' ? 'General' : 'Class' }}
                                </span>
                            </div>
                            <p class="text-[10px] text-slate-500 font-medium line-clamp-2">{{ $announcement->content }}</p>
                        </div>
                    @empty
                        <div class="text-center py-6">
                            <p class="text-xs text-slate-400 font-semibold">No recent announcements.</p>
                        </div>
                    @endforelse
                </div>
            </div>
            
            <a href="{{ route('superadmin.messages.index') }}" class="w-full py-3 bg-emerald-50 hover:bg-emerald-100 text-emerald-700 font-bold rounded-2xl transition-all flex items-center justify-center gap-2 mt-6 border border-emerald-100 text-xs">
                View All Messages
                <svg class="w-4 h-4 fill-none stroke-current" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
            </a>
        </div>
    </div>

    <!-- Admin Account User Management Module (Super Admin Only Access) -->
    <div id="accounts" class="bg-white border border-slate-200 rounded-3xl p-6 shadow-sm mt-8 scroll-mt-24">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
            <div>
                <h3 class="text-lg font-bold text-slate-800">System Accounts</h3>
                <p class="text-xs text-slate-500 font-medium mt-0.5">Manage system operators, teachers and config permissions</p>
            </div>
            <!-- Role Selection Filter Buttons -->
            <div class="flex items-center gap-1.5 bg-slate-100 p-1 rounded-2xl">
                <button onclick="filterUserRole('all')" id="btn-role-all" class="px-4 py-1.5 rounded-xl text-[10px] font-bold transition-all bg-white text-slate-800 shadow-sm">
                    Show All
                </button>
                <button onclick="filterUserRole('admin')" id="btn-role-admin" class="px-4 py-1.5 rounded-xl text-[10px] font-bold transition-all text-slate-500 hover:text-slate-800">
                    Admins
                </button>
                <button onclick="filterUserRole('teacher')" id="btn-role-teacher" class="px-4 py-1.5 rounded-xl text-[10px] font-bold transition-all text-slate-500 hover:text-slate-800">
                    Teachers
                </button>
            </div>
        </div>

        @if(session('success'))
            <div id="dashAlert" class="flex items-center gap-3 bg-emerald-50 border border-emerald-200 text-emerald-800 text-xs font-semibold px-4 py-3 rounded-2xl mb-4">
                <svg class="w-4 h-4 text-emerald-600 fill-none stroke-current shrink-0" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                {{ session('success') }}
            </div>
        @endif

        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="border-b border-slate-100 text-[10px] font-bold uppercase tracking-widest text-slate-400">
                        <th class="pb-3 pl-4">Account Name</th>
                        <th class="pb-3">Role</th>
                        <th class="pb-3">Email Address</th>
                        <th class="pb-3">Status</th>
                        <th class="pb-3">Permissions</th>
                        <th class="pb-3 text-right pr-4">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50 text-xs font-medium text-slate-600">
                    @forelse($users as $user)
                        @php
                            $perms = $user->permissions ?? [];
                            $permLabels = ['profile' => 'Profile', 'email' => 'Email', 'payment' => 'Payment', 'qrcode' => 'QR Code', 'system' => 'System'];
                        @endphp
                        <tr class="hover:bg-slate-50/55 transition-all user-row-item {{ $user->role === 'admin' ? 'cursor-pointer' : '' }}" 
                            data-role="{{ $user->role }}"
                            @if($user->role === 'admin') onclick="openPermModal({{ $user->id }}, '{{ addslashes($user->name) }}', @json($perms))" @endif>
                            <td class="py-4 pl-4">
                                <div class="flex items-center gap-2.5">
                                    <div class="w-8 h-8 rounded-xl bg-gradient-to-br {{ $user->role === 'admin' ? 'from-blue-500 to-indigo-600' : 'from-teal-500 to-emerald-700' }} flex items-center justify-center text-white font-extrabold text-xs shrink-0">
                                        {{ strtoupper(substr($user->name, 0, 1)) }}
                                    </div>
                                    <span class="font-bold text-slate-800">{{ $user->name }}</span>
                                </div>
                            </td>
                            <td class="py-4">
                                <span class="px-2 py-0.5 rounded-md text-[9px] font-extrabold uppercase {{ $user->role === 'admin' ? 'bg-indigo-50 text-indigo-700 border border-indigo-100' : 'bg-teal-50 text-teal-700 border border-teal-100' }}">
                                    {{ $user->role }}
                                </span>
                            </td>
                            <td class="py-4 text-slate-500">{{ $user->email }}</td>
                            <td class="py-4">
                                <span class="px-2 py-0.5 rounded-full text-[9px] font-extrabold uppercase {{ $user->status === 'active' ? 'bg-emerald-50 text-emerald-700 border border-emerald-100' : 'bg-red-50 text-red-700 border border-red-100' }}">
                                    {{ $user->status }}
                                </span>
                            </td>
                            <td class="py-4">
                                <div class="flex flex-wrap gap-1">
                                    @if($user->role === 'teacher')
                                        <span class="text-[9px] text-slate-400 font-semibold italic">Not Applicable</span>
                                    @elseif(empty($perms))
                                        <span class="px-2 py-0.5 bg-slate-100 text-slate-400 text-[9px] font-bold rounded-full">No Access</span>
                                    @else
                                        @foreach($perms as $p)
                                            <span class="px-2 py-0.5 bg-emerald-50 border border-emerald-100 text-emerald-700 text-[9px] font-extrabold rounded-full">
                                                {{ $permLabels[$p] ?? $p }}
                                            </span>
                                        @endforeach
                                    @endif
                                </div>
                            </td>
                            <td class="py-4 text-right pr-4" onclick="event.stopPropagation();">
                                <div class="flex items-center justify-end gap-2">
                                    @if($user->role === 'admin')
                                        <!-- Manage Permissions button -->
                                        <button type="button"
                                            onclick="event.stopPropagation(); openPermModal({{ $user->id }}, '{{ addslashes($user->name) }}', @json($perms))"
                                            class="px-2.5 py-1 rounded-lg bg-blue-50 hover:bg-blue-100 border border-blue-200 text-[10px] font-bold text-blue-600 transition-all flex items-center gap-1">
                                            <svg class="w-3 h-3 fill-none stroke-current" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/></svg>
                                            Permissions
                                        </button>
                                    @endif
                                    <form action="{{ route('superadmin.admins.toggle', $user->id) }}" method="POST" class="inline">
                                        @csrf
                                        <button type="submit" class="px-2.5 py-1 rounded-lg bg-slate-50 hover:bg-slate-100 border border-slate-200 text-[10px] font-bold text-slate-600 transition-all">
                                            {{ $user->status === 'active' ? 'Deactivate' : 'Activate' }}
                                        </button>
                                    </form>
                                    <form action="{{ route('superadmin.admins.delete', $user->id) }}" method="POST" class="inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="px-2.5 py-1 rounded-lg bg-red-50 hover:bg-red-100 border border-red-200 text-[10px] font-bold text-red-600 transition-all">
                                            Delete
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="py-8 text-center text-slate-400 font-semibold">No accounts configured in the database yet.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    function filterUserRole(role) {
        // Toggle Active Classes on Filter Buttons
        const roles = ['all', 'admin', 'teacher'];
        roles.forEach(r => {
            const btn = document.getElementById('btn-role-' + r);
            if (r === role) {
                btn.classList.add('bg-white', 'text-slate-800', 'shadow-sm');
                btn.classList.remove('text-slate-500', 'hover:text-slate-800');
            } else {
                btn.classList.remove('bg-white', 'text-slate-800', 'shadow-sm');
                btn.classList.add('text-slate-500', 'hover:text-slate-800');
            }
        });

        // Hide/Show Rows
        const rows = document.querySelectorAll('.user-row-item');
        rows.forEach(row => {
            if (role === 'all' || row.getAttribute('data-role') === role) {
                row.classList.remove('hidden');
            } else {
                row.classList.add('hidden');
            }
        });
    }
</script>

<!-- ===== Permissions Assignment Modal ===== -->
<div id="permModal" class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden">
    <div class="bg-white rounded-3xl w-full max-w-lg p-6 shadow-2xl">
        <div class="flex justify-between items-center mb-6">
            <div>
                <h3 class="text-base font-extrabold text-slate-800">Manage Permissions</h3>
                <p id="permModalSubtitle" class="text-[10px] text-slate-400 font-medium mt-0.5"></p>
            </div>
            <button onclick="closePermModal()" class="text-slate-400 hover:text-slate-600 transition-all">
                <svg class="w-5 h-5 fill-none stroke-current" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>

        <form id="permForm" method="POST" class="space-y-4">
            @csrf

            <p class="text-[10px] text-slate-500 font-semibold pb-1">Select which Settings sections this admin can access:</p>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                @foreach([
                    ['profile', 'My Profile',        'from-emerald-500 to-emerald-700', 'M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0z'],
                    ['email',   'Email Config',       'from-blue-500 to-indigo-700',     'M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'],
                    ['payment', 'Payment Config',     'from-violet-500 to-purple-700',   'M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z'],
                    ['qrcode',  'QR Code Generator',  'from-slate-600 to-slate-900',     'M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z'],
                    ['system',  'System Info',        'from-rose-500 to-orange-600',     'M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'],
                ] as [$key, $label, $gradient, $iconPath])
                <label class="cursor-pointer group" id="perm-label-{{ $key }}">
                    <input type="checkbox" name="permissions[]" value="{{ $key }}" id="perm-{{ $key }}"
                        class="sr-only peer">
                    <div class="peer-checked:border-emerald-500 peer-checked:bg-emerald-50 border-2 border-slate-200 rounded-2xl p-4 flex items-center gap-3 transition-all hover:border-slate-300 group-hover:shadow-sm">
                        <div class="w-9 h-9 rounded-xl bg-gradient-to-br {{ $gradient }} flex items-center justify-center shrink-0">
                            <svg class="w-4 h-4 text-white fill-none stroke-current" stroke-width="2" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="{{ $iconPath }}"/>
                            </svg>
                        </div>
                        <div class="flex-1">
                            <div class="text-xs font-bold text-slate-800">{{ $label }}</div>
                        </div>
                        <div class="w-4 h-4 rounded border-2 border-slate-300 peer-checked:bg-emerald-500 peer-checked:border-emerald-500 flex items-center justify-center perm-check-icon shrink-0 transition-all" id="check-icon-{{ $key }}">
                            <svg class="w-2.5 h-2.5 text-white fill-none stroke-current hidden" stroke-width="3" viewBox="0 0 24 24" id="check-svg-{{ $key }}"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                        </div>
                    </div>
                </label>
                @endforeach
            </div>

            <div class="flex items-center gap-2 pt-2">
                <button type="button" onclick="selectAllPerms()" class="text-[10px] font-bold text-emerald-700 hover:underline">Select All</button>
                <span class="text-slate-200">|</span>
                <button type="button" onclick="clearAllPerms()" class="text-[10px] font-bold text-slate-400 hover:underline">Clear All</button>
            </div>

            <div class="flex gap-3 pt-2">
                <button type="submit" class="flex-1 py-3 bg-emerald-700 hover:bg-emerald-600 active:scale-95 text-white text-xs font-bold rounded-2xl transition-all shadow-md shadow-emerald-700/20 flex items-center justify-center gap-2">
                    <svg class="w-4 h-4 fill-none stroke-current" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                    Save Permissions
                </button>
                <button type="button" onclick="closePermModal()" class="px-6 py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-bold rounded-2xl transition-all">
                    Cancel
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    function openPermModal(adminId, adminName, currentPerms) {
        // Set form action
        document.getElementById('permForm').action = `/superadmin/admins/${adminId}/permissions`;
        document.getElementById('permModalSubtitle').textContent = `Admin: ${adminName}`;

        // Reset checkboxes
        const keys = ['profile', 'email', 'payment', 'qrcode', 'system'];
        keys.forEach(k => {
            const cb = document.getElementById('perm-' + k);
            const checked = currentPerms.includes(k);
            if (cb) cb.checked = checked;
            updateCheckIcon(k, checked);
        });

        // Add live toggle listeners
        keys.forEach(k => {
            const cb = document.getElementById('perm-' + k);
            if (cb) {
                cb.onchange = () => updateCheckIcon(k, cb.checked);
            }
        });

        document.getElementById('permModal').classList.remove('hidden');
    }

    function updateCheckIcon(key, checked) {
        const icon = document.getElementById('check-icon-' + key);
        const svg  = document.getElementById('check-svg-' + key);
        if (!icon || !svg) return;
        if (checked) {
            icon.classList.add('bg-emerald-500', 'border-emerald-500');
            icon.classList.remove('border-slate-300');
            svg.classList.remove('hidden');
        } else {
            icon.classList.remove('bg-emerald-500', 'border-emerald-500');
            icon.classList.add('border-slate-300');
            svg.classList.add('hidden');
        }
    }

    function closePermModal() {
        document.getElementById('permModal').classList.add('hidden');
    }

    function selectAllPerms() {
        ['profile','email','payment','qrcode','system'].forEach(k => {
            const cb = document.getElementById('perm-' + k);
            if (cb) { cb.checked = true; updateCheckIcon(k, true); }
        });
    }

    function clearAllPerms() {
        ['profile','email','payment','qrcode','system'].forEach(k => {
            const cb = document.getElementById('perm-' + k);
            if (cb) { cb.checked = false; updateCheckIcon(k, false); }
        });
    }

    // Close on backdrop click
    document.getElementById('permModal').addEventListener('click', function(e) {
        if (e.target === this) closePermModal();
    });

    // Auto-dismiss dashboard alert
    setTimeout(() => {
        const el = document.getElementById('dashAlert');
        if (el) { el.style.opacity = '0'; el.style.transition = 'opacity 0.5s'; setTimeout(() => el.remove(), 500); }
    }, 4000);
</script>

<!-- Add Admin Modal popup wrapper -->
<div id="adminModal" class="fixed inset-0 bg-slate-900/40 backdrop-blur-md z-50 flex items-center justify-center p-4 hidden transition-opacity duration-300">
    <div class="bg-white/95 backdrop-blur-xl border border-slate-200/50 rounded-[2rem] w-full max-w-md p-8 shadow-2xl shadow-indigo-500/10 relative overflow-hidden transform scale-95 opacity-0 transition-all duration-300" id="adminModalContent">
        <!-- Decorative bg -->
        <div class="absolute -right-12 -top-12 w-40 h-40 bg-gradient-to-br from-indigo-500/20 to-emerald-500/20 rounded-full blur-3xl pointer-events-none"></div>
        
        <div class="flex justify-between items-start mb-8 relative z-10">
            <div>
                <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-indigo-50 to-emerald-50 border border-indigo-100 flex items-center justify-center mb-4 text-indigo-600 shadow-sm">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/></svg>
                </div>
                <h3 class="text-xl font-extrabold text-slate-800 tracking-tight">Add System Account</h3>
                <p class="text-xs font-semibold text-slate-500 mt-1">Create a new admin or teacher profile.</p>
            </div>
            <button onclick="closeAdminModal()" class="w-8 h-8 rounded-xl bg-slate-50 text-slate-400 flex items-center justify-center hover:bg-slate-100 hover:text-slate-600 transition-colors border border-slate-100 mt-1">
                <svg class="w-4 h-4 fill-none stroke-current" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>

        <form action="{{ route('superadmin.admins.store') }}" method="POST" class="space-y-5 relative z-10">
            @csrf
            
            <div class="grid grid-cols-2 gap-3 mb-6">
                <label class="relative cursor-pointer group">
                    <input type="radio" name="role" value="admin" class="peer sr-only" checked>
                    <div class="p-4 rounded-2xl border-2 border-slate-100 peer-checked:border-indigo-500 peer-checked:bg-indigo-50 transition-all text-center group-hover:border-indigo-200">
                        <div class="w-8 h-8 mx-auto rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mb-2 peer-checked:bg-indigo-500 peer-checked:text-white transition-colors">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                        </div>
                        <span class="block text-xs font-bold text-slate-700 peer-checked:text-indigo-700">Admin</span>
                    </div>
                </label>
                <label class="relative cursor-pointer group">
                    <input type="radio" name="role" value="teacher" class="peer sr-only">
                    <div class="p-4 rounded-2xl border-2 border-slate-100 peer-checked:border-emerald-500 peer-checked:bg-emerald-50 transition-all text-center group-hover:border-emerald-200">
                        <div class="w-8 h-8 mx-auto rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center mb-2 peer-checked:bg-emerald-500 peer-checked:text-white transition-colors">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
                        </div>
                        <span class="block text-xs font-bold text-slate-700 peer-checked:text-emerald-700">Teacher</span>
                    </div>
                </label>
            </div>

            <div>
                <label class="block text-[10px] font-extrabold uppercase tracking-wider text-slate-500 mb-1.5 ml-1">Full Name</label>
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-slate-400">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                    </div>
                    <input type="text" name="name" required placeholder="John Doe" class="w-full pl-11 pr-4 py-3 rounded-2xl border-0 bg-slate-100/80 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40 text-sm font-semibold transition-all">
                </div>
            </div>

            <div>
                <label class="block text-[10px] font-extrabold uppercase tracking-wider text-slate-500 mb-1.5 ml-1">Email Address</label>
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-slate-400">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                    </div>
                    <input type="email" name="email" required placeholder="john@school.edu" class="w-full pl-11 pr-4 py-3 rounded-2xl border-0 bg-slate-100/80 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40 text-sm font-semibold transition-all">
                </div>
            </div>

            <div>
                <label class="block text-[10px] font-extrabold uppercase tracking-wider text-slate-500 mb-1.5 ml-1">Initial Password</label>
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-slate-400">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                    </div>
                    <input type="password" name="password" required placeholder="••••••" class="w-full pl-11 pr-4 py-3 rounded-2xl border-0 bg-slate-100/80 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40 text-sm font-semibold transition-all">
                </div>
            </div>

            <button type="submit" class="w-full py-3.5 bg-slate-900 hover:bg-indigo-600 text-white font-extrabold text-sm rounded-2xl transition-colors shadow-lg shadow-indigo-500/20 mt-4 flex items-center justify-center gap-2 group">
                Create Account
                <svg class="w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
            </button>
        </form>
    </div>
</div>

<script>
    function openAdminModal() {
        const modal = document.getElementById('adminModal');
        const content = document.getElementById('adminModalContent');
        modal.classList.remove('hidden');
        // Trigger animation
        setTimeout(() => {
            modal.classList.remove('opacity-0');
            content.classList.remove('scale-95', 'opacity-0');
            content.classList.add('scale-100', 'opacity-100');
        }, 10);
    }

    function closeAdminModal() {
        const modal = document.getElementById('adminModal');
        const content = document.getElementById('adminModalContent');
        content.classList.remove('scale-100', 'opacity-100');
        content.classList.add('scale-95', 'opacity-0');
        setTimeout(() => {
            modal.classList.add('hidden');
        }, 300);
    }
</script>

<!-- Profile Modal (Super Admin self profile update) -->
<div id="profileModal" class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden transition-all">
    <div class="bg-white rounded-3xl w-full max-w-md p-6 shadow-2xl">
        <div class="flex justify-between items-center mb-6">
            <h3 class="text-base font-extrabold text-slate-800">Edit My Profile</h3>
            <button onclick="document.getElementById('profileModal').classList.add('hidden')" class="text-slate-400 hover:text-slate-600">
                <svg class="w-5 h-5 fill-none stroke-current" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>

        <form action="{{ route('superadmin.profile.update') }}" method="POST" class="space-y-4">
            @csrf
            <div>
                <label class="block text-[10px] font-extrabold uppercase tracking-wider text-slate-500 mb-1">Full Name</label>
                <input type="text" name="name" value="{{ $superadmin->name ?? '' }}" required class="w-full px-4 py-2.5 rounded-2xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 text-xs">
            </div>

            <div>
                <label class="block text-[10px] font-extrabold uppercase tracking-wider text-slate-500 mb-1">Email Address</label>
                <input type="email" name="email" value="{{ $superadmin->email ?? '' }}" required class="w-full px-4 py-2.5 rounded-2xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 text-xs">
            </div>

            <div>
                <label class="block text-[10px] font-extrabold uppercase tracking-wider text-slate-500 mb-1">New Password (leave blank to keep current)</label>
                <input type="password" name="password" class="w-full px-4 py-2.5 rounded-2xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 text-xs">
            </div>

            <div>
                <label class="block text-[10px] font-extrabold uppercase tracking-wider text-slate-500 mb-1">Confirm New Password</label>
                <input type="password" name="password_confirmation" class="w-full px-4 py-2.5 rounded-2xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 text-xs">
            </div>

            <button type="submit" class="w-full py-3 bg-emerald-700 hover:bg-emerald-600 text-white font-bold rounded-2xl transition-all shadow-md shadow-emerald-700/20 mt-2">
                Save Profile Changes
            </button>
        </form>
    </div>
</div>

<style>
    /* Styling for bar chart stripes */
    .pattern-diagonal {
        background-color: transparent;
        background-image: repeating-linear-gradient(45deg, rgba(16, 185, 129, 0.15) 0px, rgba(16, 185, 129, 0.15) 2px, transparent 2px, transparent 10px);
    }
</style>

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const rawLabels = @json($chartLabels);
        const rawData = @json($chartData);
        
        const hasData = rawLabels.length > 0;
        
        if (!hasData) {
            const chartContainer = document.getElementById('performanceChart');
            if(chartContainer) {
                chartContainer.innerHTML = '<div class="flex items-center justify-center h-full text-sm font-medium text-slate-400">No exam data available yet</div>';
            }
            return;
        }

        const options = {
            series: [{
                name: 'Average Score (%)',
                data: rawData
            }],
            chart: {
                type: 'bar',
                height: 250,
                toolbar: { show: false },
                fontFamily: 'inherit'
            },
            plotOptions: {
                bar: {
                    borderRadius: 6,
                    columnWidth: '45%',
                    distributed: true,
                }
            },
            colors: ['#047857', '#059669', '#10b981', '#34d399', '#6ee7b7'], // Emerald palette
            dataLabels: {
                enabled: true,
                formatter: function (val) {
                    return val + "%";
                },
                style: {
                    fontSize: '10px',
                    colors: ['#fff']
                }
            },
            xaxis: {
                categories: rawLabels,
                axisBorder: { show: false },
                axisTicks: { show: false },
                labels: {
                    style: { colors: '#64748b', fontSize: '11px', fontWeight: 600 }
                }
            },
            yaxis: {
                min: 0,
                max: 100,
                labels: {
                    style: { colors: '#94a3b8', fontSize: '10px' },
                    formatter: function (val) { return val + "%" }
                }
            },
            grid: {
                borderColor: '#f1f5f9',
                strokeDashArray: 4,
                yaxis: { lines: { show: true } }
            },
            legend: { show: false },
            tooltip: {
                theme: 'light',
                y: {
                    formatter: function (val) {
                        return val + "%"
                    }
                }
            }
        };

        if (document.querySelector("#performanceChart")) {
            const chart = new ApexCharts(document.querySelector("#performanceChart"), options);
            chart.render();
        }
    });
</script>
@endsection