@extends('Component.layout')

@section('title', 'Super Admin Help & Support - Iqra')
@section('breadcrumb', 'Help & Support')

@section('content')
<div class="space-y-6 max-w-5xl mx-auto">

    {{-- Page Header --}}
    <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">Super Admin Support</h1>
            <p class="text-xs text-slate-500 font-medium mt-1">Get assistance, contact the system administrator, and learn how to use the software.</p>
        </div>
        <a href="{{ route('superadmin.dashboard') }}"
            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">
            <svg class="w-3.5 h-3.5 fill-none stroke-current" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"/></svg>
            Back to Dashboard
        </a>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        
        {{-- Left Column: Contact Card --}}
        <div class="lg:col-span-1 space-y-6">
            <div class="bg-white border border-slate-200 rounded-3xl p-6 shadow-sm">
                <div class="flex flex-col items-center text-center pb-6 border-b border-slate-100">
                    <div class="w-20 h-20 rounded-3xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white font-extrabold text-3xl shadow-lg shadow-indigo-500/20 mb-4">
                        R
                    </div>
                    <div class="text-xs font-extrabold text-indigo-600 uppercase tracking-widest mb-1">System Administrator</div>
                    <h2 class="text-2xl font-extrabold text-slate-800">Rizvan</h2>
                </div>
                
                <div class="pt-6 space-y-4">
                    <p class="text-[11px] text-slate-500 font-medium leading-relaxed">
                        If you encounter technical issues, need to reset your permissions, or have requests for new system features, Rizvan is your primary contact person.
                    </p>
                    
                    <div class="bg-slate-50 rounded-2xl p-4 space-y-3 border border-slate-100">
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 rounded-lg bg-indigo-100 flex items-center justify-center shrink-0">
                                <svg class="w-4 h-4 text-indigo-700 fill-none stroke-current" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" 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>
                            <div>
                                <div class="text-[9px] font-bold text-slate-400 uppercase">Email Support</div>
                                <div class="text-xs font-extrabold text-slate-700">support@iqraschool.com</div>
                            </div>
                        </div>
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 rounded-lg bg-emerald-100 flex items-center justify-center shrink-0">
                                <svg class="w-4 h-4 text-emerald-700 fill-none stroke-current" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
                            </div>
                            <div>
                                <div class="text-[9px] font-bold text-slate-400 uppercase">Phone / WhatsApp</div>
                                <div class="text-xs font-extrabold text-slate-700">+91 98765 43210</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="bg-gradient-to-br from-slate-900 to-slate-800 rounded-3xl p-6 text-white shadow-lg relative overflow-hidden">
                <div class="absolute -right-10 -top-10 w-32 h-32 bg-emerald-500/20 rounded-full blur-2xl"></div>
                <div class="relative z-10">
                    <svg class="w-6 h-6 text-emerald-400 fill-current mb-3" viewBox="0 0 24 24">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
                    </svg>
                    <h3 class="text-sm font-extrabold mb-1">Iqra School Management</h3>
                    <p class="text-[10px] text-slate-400 font-medium">Version 1.0.0 &copy; 2026</p>
                    <p class="text-xs text-slate-300 mt-4 leading-relaxed">
                        Built for seamless administrative control, financial tracking, and role-based access management.
                    </p>
                </div>
            </div>
        </div>

        {{-- Right Column: Documentation / How to use --}}
        <div class="lg:col-span-2 space-y-6">
            <div class="bg-white border border-slate-200 rounded-3xl p-8 shadow-sm">
                <h2 class="text-lg font-extrabold text-slate-800 mb-6 pb-4 border-b border-slate-50">Super Admin Privileges Guide</h2>
                
                <div class="space-y-8">
                    
                    {{-- Section 1 --}}
                    <div>
                        <div class="flex items-center gap-3 mb-3">
                            <div class="w-8 h-8 rounded-xl bg-indigo-50 text-indigo-600 flex items-center justify-center font-bold text-xs shrink-0">1</div>
                            <h3 class="text-sm font-extrabold text-slate-800">Managing Users</h3>
                        </div>
                        <p class="text-xs text-slate-600 leading-relaxed pl-11">
                            As a Super Admin, you can create and manage both Admin Operators and Teachers from your Dashboard. You have the power to instantly suspend (inactivate) or completely remove users.
                        </p>
                    </div>

                    {{-- Section 2 --}}
                    <div>
                        <div class="flex items-center gap-3 mb-3">
                            <div class="w-8 h-8 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center font-bold text-xs shrink-0">2</div>
                            <h3 class="text-sm font-extrabold text-slate-800">Roles & Permissions System</h3>
                        </div>
                        <p class="text-xs text-slate-600 leading-relaxed pl-11 mb-3">
                            Navigate to the <strong>Roles & Permissions</strong> tab in the sidebar to configure what your Admin Operators can access.
                        </p>
                        <div class="pl-11 grid grid-cols-1 sm:grid-cols-2 gap-3">
                            <div class="p-4 bg-slate-50 rounded-xl border border-slate-100">
                                <span class="font-bold text-xs text-slate-800 block mb-1">Email Config</span>
                                <p class="text-[10px] text-slate-500 font-medium">Allows the admin to configure SMTP server settings.</p>
                            </div>
                            <div class="p-4 bg-slate-50 rounded-xl border border-slate-100">
                                <span class="font-bold text-xs text-slate-800 block mb-1">Payment Config</span>
                                <p class="text-[10px] text-slate-500 font-medium">Allows the admin to set up Stripe or Razorpay gateway keys.</p>
                            </div>
                        </div>
                    </div>

                    {{-- Section 3 --}}
                    <div>
                        <div class="flex items-center gap-3 mb-3">
                            <div class="w-8 h-8 rounded-xl bg-orange-50 text-orange-600 flex items-center justify-center font-bold text-xs shrink-0">3</div>
                            <h3 class="text-sm font-extrabold text-slate-800">Generating QR Codes</h3>
                        </div>
                        <p class="text-xs text-slate-600 leading-relaxed pl-11">
                            Available in your Settings menu. You can generate high-quality QR codes for Student IDs, Payment Links, or Attendance tracking.
                        </p>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>
@endsection