@extends('Component.layout')

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

@section('content')
@php
    $activeTab = session('active_tab', 'profile');
@endphp

<div class="space-y-6">

    {{-- 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">System Settings</h1>
            <p class="text-xs text-slate-500 font-medium mt-1">Configure your school management system options.</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>

    {{-- Success / Error Alert --}}
    @if(session('success'))
        <div id="successAlert" class="flex items-center gap-3 bg-emerald-50 border border-emerald-200 text-emerald-800 text-xs font-semibold px-4 py-3.5 rounded-2xl">
            <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
    @if($errors->any())
        <div class="flex items-start gap-3 bg-red-50 border border-red-200 text-red-800 text-xs font-semibold px-4 py-3.5 rounded-2xl">
            <svg class="w-4 h-4 text-red-600 fill-none stroke-current shrink-0 mt-0.5" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/></svg>
            <ul class="list-disc pl-2 space-y-0.5">
                @foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach
            </ul>
        </div>
    @endif

    {{-- Main Settings Grid --}}
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">

        {{-- Left: Tab Menu --}}
        <div class="lg:col-span-1">
            <div class="bg-white border border-slate-100 rounded-3xl p-3 shadow-sm space-y-1 sticky top-6">

                {{-- Section Label --}}
                <div class="px-3 pt-2 pb-1 text-[10px] font-bold uppercase tracking-widest text-slate-400">Account</div>

                <button onclick="switchTab('profile')" id="tab-btn-profile"
                    class="settings-tab-btn w-full flex items-center gap-3 px-3 py-2.5 rounded-xl font-medium text-xs transition-all text-left {{ $activeTab === 'profile' ? 'bg-emerald-700 text-white' : 'text-slate-500 hover:bg-slate-50 hover:text-slate-800' }}">
                    <svg class="w-4 h-4 fill-none stroke-current shrink-0" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="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 0zM19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16"/></svg>
                    My Profile
                </button>

                <div class="px-3 pt-3 pb-1 text-[10px] font-bold uppercase tracking-widest text-slate-400">Configuration</div>

                <button onclick="switchTab('email')" id="tab-btn-email"
                    class="settings-tab-btn w-full flex items-center gap-3 px-3 py-2.5 rounded-xl font-medium text-xs transition-all text-left {{ $activeTab === 'email' ? 'bg-emerald-700 text-white' : 'text-slate-500 hover:bg-slate-50 hover:text-slate-800' }}">
                    <svg class="w-4 h-4 fill-none stroke-current shrink-0" 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>
                    Email Config
                </button>

                <button onclick="switchTab('payment')" id="tab-btn-payment"
                    class="settings-tab-btn w-full flex items-center gap-3 px-3 py-2.5 rounded-xl font-medium text-xs transition-all text-left {{ $activeTab === 'payment' ? 'bg-emerald-700 text-white' : 'text-slate-500 hover:bg-slate-50 hover:text-slate-800' }}">
                    <svg class="w-4 h-4 fill-none stroke-current shrink-0" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
                    Payment Config
                </button>

                <button onclick="switchTab('qrcode')" id="tab-btn-qrcode"
                    class="settings-tab-btn w-full flex items-center gap-3 px-3 py-2.5 rounded-xl font-medium text-xs transition-all text-left {{ $activeTab === 'qrcode' ? 'bg-emerald-700 text-white' : 'text-slate-500 hover:bg-slate-50 hover:text-slate-800' }}">
                    <svg class="w-4 h-4 fill-none stroke-current shrink-0" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="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"/></svg>
                    QR Code Generator
                </button>

                <button onclick="switchTab('system')" id="tab-btn-system"
                    class="settings-tab-btn w-full flex items-center gap-3 px-3 py-2.5 rounded-xl font-medium text-xs transition-all text-left {{ $activeTab === 'system' ? 'bg-emerald-700 text-white' : 'text-slate-500 hover:bg-slate-50 hover:text-slate-800' }}">
                    <svg class="w-4 h-4 fill-none stroke-current shrink-0" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="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"/></svg>
                    System Info
                </button>
            </div>
        </div>

        {{-- Right: Tab Panels --}}
        <div class="lg:col-span-3 space-y-6">

            {{-- ============================
                 TAB: My Profile
            ============================= --}}
            <div id="tab-profile" class="settings-tab {{ $activeTab !== 'profile' ? 'hidden' : '' }}">
                <div class="bg-white border border-slate-100 rounded-3xl p-8 shadow-sm">
                    <div class="flex items-center gap-4 mb-8 pb-6 border-b border-slate-50">
                        <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-emerald-500 to-emerald-800 flex items-center justify-center text-white font-extrabold text-2xl shadow-lg shadow-emerald-500/20">
                            {{ strtoupper(substr($user->name, 0, 1)) }}
                        </div>
                        <div>
                            <h2 class="text-lg font-extrabold text-slate-800">{{ $user->name }}</h2>
                            <p class="text-xs text-slate-500 mt-0.5">{{ $user->email }}</p>
                            <span class="inline-block mt-1 px-2 py-0.5 bg-emerald-50 border border-emerald-100 text-emerald-700 text-[9px] font-extrabold uppercase rounded-full">Super Admin</span>
                        </div>
                    </div>

                    <form action="{{ route('superadmin.settings.profile') }}" method="POST" class="space-y-5">
                        @csrf
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                            <div>
                                <label class="block text-[10px] font-extrabold uppercase tracking-wider text-slate-500 mb-1.5">Full Name</label>
                                <input type="text" name="name" value="{{ old('name', $user->name) }}" required
                                    class="w-full px-4 py-3 rounded-2xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-300 text-sm text-slate-800 transition-all">
                            </div>
                            <div>
                                <label class="block text-[10px] font-extrabold uppercase tracking-wider text-slate-500 mb-1.5">Email Address</label>
                                <input type="email" name="email" value="{{ old('email', $user->email) }}" required
                                    class="w-full px-4 py-3 rounded-2xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-300 text-sm text-slate-800 transition-all">
                            </div>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                            <div>
                                <label class="block text-[10px] font-extrabold uppercase tracking-wider text-slate-500 mb-1.5">New Password <span class="normal-case font-normal">(leave blank to keep)</span></label>
                                <input type="password" name="password"
                                    class="w-full px-4 py-3 rounded-2xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-300 text-sm text-slate-800 transition-all" placeholder="••••••••">
                            </div>
                            <div>
                                <label class="block text-[10px] font-extrabold uppercase tracking-wider text-slate-500 mb-1.5">Confirm New Password</label>
                                <input type="password" name="password_confirmation"
                                    class="w-full px-4 py-3 rounded-2xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-300 text-sm text-slate-800 transition-all" placeholder="••••••••">
                            </div>
                        </div>
                        <div class="pt-2 flex justify-end">
                            <button type="submit" class="px-6 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 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 Profile
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            {{-- ============================
                 TAB: Email Configuration
            ============================= --}}
            <div id="tab-email" class="settings-tab {{ $activeTab !== 'email' ? 'hidden' : '' }}">
                <div class="bg-white border border-slate-100 rounded-3xl p-8 shadow-sm">
                    <div class="flex items-center gap-4 mb-8 pb-6 border-b border-slate-50">
                        <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-700 flex items-center justify-center shadow-lg shadow-blue-500/20">
                            <svg class="w-6 h-6 text-white 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>
                            <h2 class="text-base font-extrabold text-slate-800">Email / SMTP Configuration</h2>
                            <p class="text-xs text-slate-500 mt-0.5">Configure the outgoing mail server for system emails, notifications, and reports.</p>
                        </div>
                    </div>

                    <form action="{{ route('superadmin.settings.email') }}" method="POST" class="space-y-5">
                        @csrf
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                            <div>
                                <label class="block text-[10px] font-extrabold uppercase tracking-wider text-slate-500 mb-1.5">Mail Driver</label>
                                <select name="mail_driver" class="w-full px-4 py-3 rounded-2xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 text-sm text-slate-800 transition-all">
                                    <option value="smtp">SMTP</option>
                                    <option value="sendmail">Sendmail</option>
                                    <option value="mailgun">Mailgun</option>
                                    <option value="ses">Amazon SES</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-[10px] font-extrabold uppercase tracking-wider text-slate-500 mb-1.5">Encryption</label>
                                <select name="mail_encryption" class="w-full px-4 py-3 rounded-2xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 text-sm text-slate-800 transition-all">
                                    <option value="tls">TLS</option>
                                    <option value="ssl">SSL</option>
                                    <option value="none">None</option>
                                </select>
                            </div>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                            <div>
                                <label class="block text-[10px] font-extrabold uppercase tracking-wider text-slate-500 mb-1.5">SMTP Host</label>
                                <input type="text" name="mail_host" value="smtp.mailtrap.io" placeholder="smtp.example.com"
                                    class="w-full px-4 py-3 rounded-2xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 text-sm text-slate-800 transition-all">
                            </div>
                            <div>
                                <label class="block text-[10px] font-extrabold uppercase tracking-wider text-slate-500 mb-1.5">SMTP Port</label>
                                <input type="number" name="mail_port" value="587" placeholder="587"
                                    class="w-full px-4 py-3 rounded-2xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 text-sm text-slate-800 transition-all">
                            </div>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                            <div>
                                <label class="block text-[10px] font-extrabold uppercase tracking-wider text-slate-500 mb-1.5">Username</label>
                                <input type="text" name="mail_username" placeholder="your_smtp_username"
                                    class="w-full px-4 py-3 rounded-2xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 text-sm text-slate-800 transition-all">
                            </div>
                            <div>
                                <label class="block text-[10px] font-extrabold uppercase tracking-wider text-slate-500 mb-1.5">Password</label>
                                <input type="password" name="mail_password" placeholder="••••••••"
                                    class="w-full px-4 py-3 rounded-2xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 text-sm text-slate-800 transition-all">
                            </div>
                        </div>
                        <div>
                            <label class="block text-[10px] font-extrabold uppercase tracking-wider text-slate-500 mb-1.5">Mail From Name</label>
                            <input type="text" name="mail_from_name" value="Iqra School Management" placeholder="Your School Name"
                                class="w-full px-4 py-3 rounded-2xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 text-sm text-slate-800 transition-all">
                        </div>

                        {{-- Info notice --}}
                        <div class="flex items-start gap-3 bg-blue-50 border border-blue-100 rounded-2xl px-4 py-3">
                            <svg class="w-4 h-4 text-blue-500 fill-none stroke-current shrink-0 mt-0.5" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            <p class="text-[10px] text-blue-700 font-semibold">These settings configure the system email service. Ensure your SMTP credentials are correct before saving.</p>
                        </div>

                        <div class="pt-2 flex justify-end">
                            <button type="submit" class="px-6 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 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 Email Config
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            {{-- ============================
                 TAB: Payment Configuration
            ============================= --}}
            <div id="tab-payment" class="settings-tab {{ $activeTab !== 'payment' ? 'hidden' : '' }}">
                <div class="bg-white border border-slate-100 rounded-3xl p-8 shadow-sm">
                    <div class="flex items-center gap-4 mb-8 pb-6 border-b border-slate-50">
                        <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-violet-500 to-purple-700 flex items-center justify-center shadow-lg shadow-violet-500/20">
                            <svg class="w-6 h-6 text-white fill-none stroke-current" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
                        </div>
                        <div>
                            <h2 class="text-base font-extrabold text-slate-800">Payment Gateway Configuration</h2>
                            <p class="text-xs text-slate-500 mt-0.5">Set up fee collection, tuition payments, and gateway credentials.</p>
                        </div>
                    </div>

                    {{-- Gateway Selector Cards --}}
                    <div class="grid grid-cols-3 gap-3 mb-6">
                        @foreach([
                            ['id' => 'stripe',   'label' => 'Stripe',    'color' => 'indigo'],
                            ['id' => 'paypal',   'label' => 'PayPal',    'color' => 'blue'],
                            ['id' => 'razorpay', 'label' => 'Razorpay',  'color' => 'sky'],
                        ] as $gw)
                        <label class="cursor-pointer">
                            <input type="radio" name="payment_gateway_select" value="{{ $gw['id'] }}" class="sr-only peer" {{ $loop->first ? 'checked' : '' }}>
                            <div class="peer-checked:border-emerald-500 peer-checked:bg-emerald-50 peer-checked:text-emerald-700 border-2 border-slate-200 rounded-2xl p-4 text-center text-xs font-bold text-slate-500 transition-all hover:border-slate-300">
                                <div class="text-lg mb-1">{{ ['stripe' => '💳', 'paypal' => '🅿', 'razorpay' => '₹'][$gw['id']] }}</div>
                                {{ $gw['label'] }}
                            </div>
                        </label>
                        @endforeach
                    </div>

                    <form action="{{ route('superadmin.settings.payment') }}" method="POST" class="space-y-5">
                        @csrf
                        <div>
                            <label class="block text-[10px] font-extrabold uppercase tracking-wider text-slate-500 mb-1.5">Payment Gateway</label>
                            <select name="payment_gateway" class="w-full px-4 py-3 rounded-2xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 text-sm text-slate-800 transition-all">
                                <option value="stripe">Stripe</option>
                                <option value="paypal">PayPal</option>
                                <option value="razorpay">Razorpay</option>
                                <option value="manual">Manual / Cash</option>
                            </select>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                            <div>
                                <label class="block text-[10px] font-extrabold uppercase tracking-wider text-slate-500 mb-1.5">API Key / Publishable Key</label>
                                <input type="text" name="api_key" placeholder="pk_live_XXXXXXXXXXXX"
                                    class="w-full px-4 py-3 rounded-2xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 text-sm text-slate-800 font-mono transition-all">
                            </div>
                            <div>
                                <label class="block text-[10px] font-extrabold uppercase tracking-wider text-slate-500 mb-1.5">Secret Key</label>
                                <input type="password" name="secret_key" placeholder="sk_live_XXXXXXXXXXXX"
                                    class="w-full px-4 py-3 rounded-2xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 text-sm text-slate-800 font-mono transition-all">
                            </div>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                            <div>
                                <label class="block text-[10px] font-extrabold uppercase tracking-wider text-slate-500 mb-1.5">Currency</label>
                                <select name="currency" class="w-full px-4 py-3 rounded-2xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 text-sm text-slate-800 transition-all">
                                    <option value="PKR">PKR — Pakistani Rupee</option>
                                    <option value="USD">USD — US Dollar</option>
                                    <option value="INR">INR — Indian Rupee</option>
                                    <option value="GBP">GBP — British Pound</option>
                                    <option value="AED">AED — UAE Dirham</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-[10px] font-extrabold uppercase tracking-wider text-slate-500 mb-1.5">Webhook Secret</label>
                                <input type="text" name="webhook_secret" placeholder="whsec_XXXXXXXXXXXX"
                                    class="w-full px-4 py-3 rounded-2xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 text-sm text-slate-800 font-mono transition-all">
                            </div>
                        </div>

                        <div class="flex items-start gap-3 bg-amber-50 border border-amber-100 rounded-2xl px-4 py-3">
                            <svg class="w-4 h-4 text-amber-500 fill-none stroke-current shrink-0 mt-0.5" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/></svg>
                            <p class="text-[10px] text-amber-700 font-semibold">Keep your secret key private. Never expose it in frontend code or version control.</p>
                        </div>

                        <div class="pt-2 flex justify-end">
                            <button type="submit" class="px-6 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 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 Payment Config
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            {{-- ============================
                 TAB: QR Code Generator
            ============================= --}}
            <div id="tab-qrcode" class="settings-tab {{ $activeTab !== 'qrcode' ? 'hidden' : '' }}">
                <div class="bg-white border border-slate-100 rounded-3xl p-8 shadow-sm">
                    <div class="flex items-center gap-4 mb-8 pb-6 border-b border-slate-50">
                        <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-slate-700 to-slate-900 flex items-center justify-center shadow-lg shadow-slate-700/20">
                            <svg class="w-6 h-6 text-white fill-none stroke-current" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="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"/></svg>
                        </div>
                        <div>
                            <h2 class="text-base font-extrabold text-slate-800">QR Code Generator</h2>
                            <p class="text-xs text-slate-500 mt-0.5">Generate QR codes for school IDs, payment links, admission forms, and more.</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        {{-- Generator Form --}}
                        <div class="space-y-5">
                            <form action="{{ route('superadmin.settings.qrcode') }}" method="POST" class="space-y-5">
                                @csrf
                                <div>
                                    <label class="block text-[10px] font-extrabold uppercase tracking-wider text-slate-500 mb-1.5">QR Code Type</label>
                                    <div class="grid grid-cols-2 gap-2 mb-3">
                                        @foreach([
                                            ['Text / URL',    'url'],
                                            ['Student ID',    'student'],
                                            ['Payment Link',  'payment'],
                                            ['Admission Form','admission'],
                                        ] as $type)
                                        <label class="cursor-pointer">
                                            <input type="radio" name="qr_type" value="{{ $type[1] }}" class="sr-only peer" {{ $loop->first ? 'checked' : '' }}>
                                            <div class="peer-checked:border-emerald-500 peer-checked:bg-emerald-50 peer-checked:text-emerald-700 border-2 border-slate-200 rounded-xl p-2.5 text-center text-[10px] font-bold text-slate-500 transition-all hover:border-slate-300">
                                                {{ $type[0] }}
                                            </div>
                                        </label>
                                        @endforeach
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-[10px] font-extrabold uppercase tracking-wider text-slate-500 mb-1.5">Content / URL to Encode</label>
                                    <textarea name="qr_text" rows="4" required placeholder="Enter text, URL, or any data to encode..."
                                        class="w-full px-4 py-3 rounded-2xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-300 text-sm text-slate-800 transition-all resize-none">{{ old('qr_text', session('qr_text', '')) }}</textarea>
                                </div>
                                <button type="submit" class="w-full py-3 bg-slate-900 hover:bg-slate-800 active:scale-95 text-white text-xs font-bold rounded-2xl transition-all flex items-center justify-center gap-2 shadow-lg shadow-slate-900/20">
                                    <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="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4"/></svg>
                                    Generate QR Code
                                </button>
                            </form>
                        </div>

                        {{-- QR Code Preview --}}
                        <div class="flex flex-col items-center justify-center">
                            @if(session('qr_url'))
                                <div class="bg-white border-2 border-slate-100 rounded-3xl p-6 shadow-xl text-center space-y-4 w-full">
                                    <div class="text-[10px] font-bold uppercase tracking-wider text-slate-400">Generated QR Code</div>
                                    <img src="{{ session('qr_url') }}" alt="QR Code" class="mx-auto w-48 h-48 rounded-xl shadow-sm">
                                    <p class="text-[10px] text-slate-500 font-medium break-all px-2">{{ session('qr_text') }}</p>
                                    <div class="flex gap-2 justify-center flex-wrap">
                                        <a href="{{ session('qr_url') }}" download="iqra-qrcode.png"
                                            class="px-4 py-2 bg-emerald-700 hover:bg-emerald-600 text-white text-[10px] font-bold rounded-xl transition-all flex items-center gap-1.5">
                                            <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                                            Download PNG
                                        </a>
                                        <button onclick="navigator.clipboard.writeText('{{ session('qr_url') }}')" class="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 text-[10px] font-bold rounded-xl transition-all flex items-center gap-1.5">
                                            <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="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
                                            Copy URL
                                        </button>
                                    </div>
                                </div>
                            @else
                                <div class="w-full border-2 border-dashed border-slate-200 rounded-3xl p-10 flex flex-col items-center justify-center text-center gap-3">
                                    <div class="w-16 h-16 rounded-2xl bg-slate-100 flex items-center justify-center">
                                        <svg class="w-8 h-8 text-slate-300 fill-none stroke-current" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="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"/></svg>
                                    </div>
                                    <p class="text-xs font-bold text-slate-400">Your QR code preview</p>
                                    <p class="text-[10px] text-slate-300 font-medium">Enter content and click Generate</p>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            {{-- ============================
                 TAB: System Info
            ============================= --}}
            <div id="tab-system" class="settings-tab {{ $activeTab !== 'system' ? 'hidden' : '' }}">
                <div class="bg-white border border-slate-100 rounded-3xl p-8 shadow-sm">
                    <div class="flex items-center gap-4 mb-8 pb-6 border-b border-slate-50">
                        <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-rose-500 to-orange-600 flex items-center justify-center shadow-lg shadow-rose-500/20">
                            <svg class="w-6 h-6 text-white fill-none stroke-current" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="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"/></svg>
                        </div>
                        <div>
                            <h2 class="text-base font-extrabold text-slate-800">System Information</h2>
                            <p class="text-xs text-slate-500 mt-0.5">Technical details about this installation of Iqra School Management.</p>
                        </div>
                    </div>

                    <div class="space-y-4">
                        @foreach([
                            ['Application Name',    config('app.name', 'Iqra SMS')],
                            ['Laravel Version',      app()->version()],
                            ['PHP Version',          PHP_VERSION],
                            ['Environment',          strtoupper(app()->environment())],
                            ['Debug Mode',           config('app.debug') ? 'Enabled' : 'Disabled'],
                            ['App URL',              config('app.url')],
                            ['Timezone',             config('app.timezone')],
                            ['Database Driver',      config('database.default')],
                        ] as [$label, $value])
                        <div class="flex items-center justify-between px-4 py-3.5 bg-slate-50 rounded-2xl">
                            <span class="text-[10px] font-extrabold uppercase tracking-wider text-slate-400">{{ $label }}</span>
                            <span class="text-xs font-bold text-slate-700 font-mono">
                                @if($label === 'Environment')
                                    <span class="px-2 py-0.5 rounded-full text-[9px] font-extrabold {{ $value === 'PRODUCTION' ? 'bg-red-50 text-red-600 border border-red-100' : 'bg-amber-50 text-amber-600 border border-amber-100' }}">{{ $value }}</span>
                                @elseif($label === 'Debug Mode')
                                    <span class="px-2 py-0.5 rounded-full text-[9px] font-extrabold {{ $value === 'Enabled' ? 'bg-orange-50 text-orange-600 border border-orange-100' : 'bg-emerald-50 text-emerald-600 border border-emerald-100' }}">{{ $value }}</span>
                                @else
                                    {{ $value }}
                                @endif
                            </span>
                        </div>
                        @endforeach
                    </div>

                    <div class="mt-8 pt-6 border-t border-slate-50">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-xs font-bold text-slate-700">Iqra School Management System</p>
                                <p class="text-[10px] text-slate-400 font-medium mt-0.5">Version 1.0.0 &bull; Built with Laravel {{ app()->version() }}</p>
                            </div>
                            <span class="px-3 py-1.5 bg-emerald-50 border border-emerald-100 text-emerald-700 text-[9px] font-extrabold uppercase rounded-full">Active</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>{{-- end right col --}}
    </div>{{-- end grid --}}
</div>

<script>
    const tabs = ['profile', 'email', 'payment', 'qrcode', 'system'];

    function switchTab(active) {
        tabs.forEach(t => {
            const panel = document.getElementById('tab-' + t);
            const btn   = document.getElementById('tab-btn-' + t);
            if (t === active) {
                panel?.classList.remove('hidden');
                btn?.classList.add('bg-emerald-700', 'text-white');
                btn?.classList.remove('text-slate-500', 'hover:bg-slate-50', 'hover:text-slate-800');
            } else {
                panel?.classList.add('hidden');
                btn?.classList.remove('bg-emerald-700', 'text-white');
                btn?.classList.add('text-slate-500', 'hover:bg-slate-50', 'hover:text-slate-800');
            }
        });
    }

    // Auto-dismiss success alert after 4s
    setTimeout(() => {
        const alert = document.getElementById('successAlert');
        if (alert) { alert.style.opacity = '0'; alert.style.transition = 'opacity 0.5s'; setTimeout(() => alert.remove(), 500); }
    }, 4000);
</script>
@endsection