@extends('layouts.admin')

@section('title', 'Global Settings')

@section('content')
    <div class="max-w-6xl mx-auto pb-32">
        <header class="mb-10 flex justify-between items-end">
            <div>
                <h1 class="text-4xl font-black text-white tracking-tight">Global Settings</h1>
                <p class="text-white/40 font-medium tracking-tight">Enterprise platform control and search optimization.</p>
            </div>
            <div id="status-indicator" class="px-5 py-2.5 bg-indigo-500/10 border border-indigo-500/20 rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] text-indigo-400 transition-all opacity-0 flex items-center">
                <span class="w-2 h-2 bg-indigo-500 rounded-full mr-3 animate-pulse"></span> Unsaved State
            </div>
        </header>

        @if(session('success'))
            <div class="mb-10 p-6 bg-emerald-500/10 border border-emerald-500/20 text-emerald-500 rounded-[2.5rem] flex items-center gap-5 animate-in fade-in slide-in-from-top-4 duration-700">
                <div class="w-12 h-12 bg-emerald-500/20 rounded-2xl flex items-center justify-center">
                    <i class="fas fa-check text-xl"></i>
                </div>
                <div>
                    <p class="font-black uppercase tracking-widest text-xs">Success</p>
                    <p class="font-bold text-sm">{{ session('success') }}</p>
                </div>
            </div>
        @endif

        <!-- Primary Navigation -->
        <div class="flex flex-wrap gap-2 mb-12 p-2 bg-white/5 rounded-[2rem] border border-white/5 w-fit">
            @foreach([
                'platform' => ['icon' => 'server', 'label' => 'Platform'],
                'landing' => ['icon' => 'palette', 'label' => 'Landing'],
                'seo' => ['icon' => 'search', 'label' => 'SEO & Stats'],
                'bot' => ['icon' => 'robot', 'label' => 'Bot Features'],
                'plans' => ['icon' => 'layer-group', 'label' => 'Plans']
            ] as $id => $data)
                <button type="button" onclick="switchTab('{{ $id }}')" id="tab-{{ $id }}" class="tab-btn px-8 py-4 rounded-[1.5rem] font-black text-xs uppercase tracking-widest transition-all focus:outline-none flex items-center gap-3">
                    <i class="fas fa-{{ $data['icon'] }} opacity-50"></i> {{ $data['label'] }}
                </button>
            @endforeach
        </div>

        <form id="settings-form" action="{{ route('super.settings.update') }}" method="POST">
            @csrf

            <!-- PLATFORM TAB -->
            <div id="content-platform" class="tab-content space-y-8 hidden animate-in fade-in duration-500">
                <div class="grid md:grid-cols-2 gap-8">
                    <div class="premium-card rounded-[3.5rem] p-10 border border-white/5 bg-gradient-to-br from-indigo-600/10 to-transparent">
                        <div class="flex items-center gap-4 mb-10">
                            <div class="w-12 h-12 bg-indigo-500/10 rounded-2xl flex items-center justify-center text-indigo-400">
                                <i class="fas fa-database"></i>
                            </div>
                            <h2 class="text-2xl font-black text-white tracking-tight">Main Infrastructure</h2>
                        </div>
                        <div class="space-y-6">
                            <div>
                                <label class="block text-[10px] font-black text-white/20 uppercase tracking-[0.3em] mb-3">Master Bot API Token</label>
                                <input type="text" name="master_db[bot_token]" value="{{ auth()->user()->bot_token }}" class="w-full bg-white/5 border border-white/10 rounded-3xl px-8 py-5 outline-none focus:border-indigo-500 text-white font-bold">
                            </div>
                            <div>
                                <label class="block text-[10px] font-black text-white/20 uppercase tracking-[0.3em] mb-3">Master Backup Channel ID</label>
                                <input type="text" name="master_db[channel_id]" value="{{ auth()->user()->channel_id }}" class="w-full bg-white/5 border border-white/10 rounded-3xl px-8 py-5 outline-none focus:border-indigo-500 text-white font-mono">
                            </div>
                            <div class="flex items-center justify-between p-6 bg-white/5 rounded-3xl border border-white/5 mt-4">
                                <div>
                                    <p class="text-white font-black text-sm">Maintenance Mode</p>
                                    <p class="text-white/30 text-[10px] font-bold uppercase tracking-widest">Disable public access</p>
                                </div>
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" name="is_maintenance" value="1" {{ \App\Models\SiteSetting::where('key', 'is_maintenance')->first()?->value == '1' ? 'checked' : '' }} class="sr-only peer">
                                    <div class="w-16 h-8 bg-white/10 rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-1 after:left-[4px] after:bg-white after:rounded-full after:h-6 after:w-8 after:transition-all peer-checked:bg-amber-500 shadow-inner"></div>
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="premium-card rounded-[3.5rem] p-10 border border-white/5 bg-gradient-to-br from-emerald-600/10 to-transparent">
                        <div class="flex items-center gap-4 mb-10">
                            <div class="w-12 h-12 bg-emerald-500/10 rounded-2xl flex items-center justify-center text-emerald-400">
                                <i class="fas fa-credit-card"></i>
                            </div>
                            <h2 class="text-2xl font-black text-white tracking-tight">Midtrans Configuration</h2>
                        </div>
                        <div class="space-y-6">
                            <div>
                                <label class="block text-[10px] font-black text-white/20 uppercase tracking-[0.3em] mb-4">Environment Mode</label>
                                <select name="midtrans_mode" class="w-full bg-white/5 border border-white/10 rounded-3xl px-8 py-6 outline-none focus:border-indigo-500 text-white font-black transition-all appearance-none cursor-pointer">
                                    <option value="sandbox" {{ \App\Models\SiteSetting::where('key', 'midtrans_mode')->first()?->value == 'sandbox' ? 'selected' : '' }} class="bg-[#0f172a]">Sandbox (Demo Mode)</option>
                                    <option value="production" {{ \App\Models\SiteSetting::where('key', 'midtrans_mode')->first()?->value == 'production' ? 'selected' : '' }} class="bg-[#0f172a]">Production (Real Money)</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-[10px] font-black text-white/20 uppercase tracking-[0.3em] mb-2 font-mono">Merchant ID</label>
                                <input type="text" name="settings[midtrans_merchant_id]" value="{{ \App\Models\SiteSetting::getVal('midtrans_merchant_id') }}" class="w-full bg-white/5 border border-white/10 rounded-2xl px-6 py-4 outline-none focus:border-indigo-500 text-white font-bold">
                            </div>
                            <div>
                                <label class="block text-[10px] font-black text-white/20 uppercase tracking-[0.3em] mb-2 font-mono">Client Key</label>
                                <input type="text" name="settings[midtrans_client_key]" value="{{ \App\Models\SiteSetting::getVal('midtrans_client_key') }}" class="w-full bg-white/5 border border-white/10 rounded-2xl px-6 py-4 outline-none focus:border-indigo-500 text-white font-bold">
                            </div>
                            <div>
                                <label class="block text-[10px] font-black text-white/20 uppercase tracking-[0.3em] mb-2 font-mono text-amber-500">Server Key (Secure)</label>
                                <input type="password" name="settings[midtrans_server_key]" id="midtrans_server_key" value="{{ \App\Models\SiteSetting::getVal('midtrans_server_key') }}" class="w-full bg-white/5 border border-white/10 rounded-2xl px-6 py-4 outline-none focus:border-indigo-500 text-white font-bold">
                            </div>
                            <div class="pt-4">
                                <button type="button" onclick="testMidtrans()" id="btn-test-midtrans" class="w-full py-4 bg-emerald-500/10 hover:bg-emerald-500/20 border border-emerald-500/20 rounded-2xl text-emerald-400 font-black text-[10px] uppercase tracking-widest transition-all active:scale-95 flex items-center justify-center gap-3">
                                    <i class="fas fa-plug"></i> Test Connection
                                </button>
                                <p id="midtrans-test-result" class="mt-4 text-[10px] font-bold uppercase tracking-widest text-center hidden"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- LANDING TAB -->
            <div id="content-landing" class="tab-content space-y-8 hidden animate-in fade-in duration-500">
                <div class="premium-card rounded-[4rem] p-12 border border-white/5 bg-white/5 backdrop-blur-3xl">
                    <h2 class="text-3xl font-black text-white tracking-tighter mb-12">Visual Composition</h2>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
                        @php $currentTemplate = \App\Models\SiteSetting::where('key', 'lp_template')->first()?->value ?? 'modern_dark'; @endphp
                        @foreach([
                            'modern_dark' => ['label' => 'Nebula Dark', 'desc' => 'Hyper-modern glassmorphism'],
                            'professional_light' => ['label' => 'Arctic Clean', 'desc' => 'Professional light theme'],
                            'minimalist' => ['label' => 'Zen Mode', 'desc' => 'Content-focused minimal']
                        ] as $val => $info)
                            <label class="relative cursor-pointer group">
                                <input type="radio" name="settings[lp_template]" value="{{ $val }}" class="sr-only peer" {{ $currentTemplate == $val ? 'checked' : '' }}>
                                <div class="p-8 rounded-[3rem] bg-white/5 border border-white/10 peer-checked:border-indigo-500 peer-checked:bg-indigo-500/10 transition-all hover:bg-white/10 text-center">
                                    <div class="aspect-square bg-white/5 rounded-[2.5rem] mb-6 flex items-center justify-center border border-white/5 group-hover:scale-105 transition-transform duration-500">
                                        <i class="fas fa-layer-group text-3xl opacity-20 group-hover:opacity-100 transition-opacity"></i>
                                    </div>
                                    <p class="font-black text-white uppercase tracking-[0.2em] text-[10px] mb-2">{{ $info['label'] }}</p>
                                    <p class="text-white/20 text-[9px] font-bold uppercase">{{ $info['desc'] }}</p>
                                </div>
                            </label>
                        @endforeach
                    </div>
                    <div class="grid gap-8">
                        <div class="group">
                             <label class="block text-[10px] font-black text-white/20 uppercase tracking-[0.3em] mb-4 ml-6">Hero Headline</label>
                            <input type="text" name="settings[lp_hero_title]" value="{{ \App\Models\SiteSetting::where('key', 'lp_hero_title')->first()?->value }}" class="w-full bg-white/5 border border-white/10 rounded-[2.5rem] px-10 py-8 outline-none focus:border-indigo-500 text-white font-black text-4xl tracking-tighter transition-all">
                        </div>
                        <div class="group">
                             <label class="block text-[10px] font-black text-white/20 uppercase tracking-[0.3em] mb-4 ml-6">Marketing Subtext</label>
                            <textarea name="settings[lp_hero_subtitle]" rows="3" class="w-full bg-white/5 border border-white/10 rounded-[2.5rem] px-10 py-8 outline-none focus:border-indigo-500 text-white text-xl font-medium tracking-tight h-40 transition-all">{{ \App\Models\SiteSetting::where('key', 'lp_hero_subtitle')->first()?->value }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

            <!-- SEO TAB -->
            <div id="content-seo" class="tab-content space-y-12 hidden animate-in fade-in duration-500">
                <div class="premium-card rounded-[4rem] p-12 border border-white/5 bg-gradient-to-br from-indigo-900/10 to-transparent">
                    <h2 class="text-3xl font-black text-white tracking-tighter mb-10 flex items-center gap-4">
                        <i class="fas fa-search-location text-indigo-400"></i> Search Authority
                    </h2>
                    <div class="grid gap-10">
                        <div>
                            <label class="block text-[10px] font-black text-white/20 uppercase tracking-[0.3em] mb-4 font-mono">Priority Meta Title</label>
                            <input type="text" name="settings[seo_title]" value="{{ \App\Models\SiteSetting::getVal('seo_title', 'LinkBot - Bot Telegram Simpan File Otomatis & Share Link') }}" class="w-full bg-white/5 border border-white/10 rounded-[2rem] px-10 py-6 outline-none focus:border-indigo-500 text-white font-black text-xl">
                        </div>
                        <div>
                            <label class="block text-[10px] font-black text-white/20 uppercase tracking-[0.3em] mb-4 font-mono">Semantic Description (Rich Snippets)</label>
                            <textarea name="settings[seo_description]" rows="3" class="w-full bg-white/5 border border-white/10 rounded-[2rem] px-10 py-6 outline-none focus:border-indigo-500 text-white font-medium text-lg">{{ \App\Models\SiteSetting::getVal('seo_description', 'Solusi terbaik sharing file via Telegram Bot. Kelola link otomatis, aman, dan cepat.') }}</textarea>
                        </div>
                        <div>
                            <label class="block text-[10px] font-black text-white/20 uppercase tracking-[0.3em] mb-4 font-mono">Viral Keywords</label>
                            <input type="text" name="settings[seo_keywords]" value="{{ \App\Models\SiteSetting::getVal('seo_keywords', 'telegram bot file sharing, bot telegram simpan file') }}" class="w-full bg-white/5 border border-white/10 rounded-[2rem] px-10 py-6 outline-none focus:border-indigo-500 text-white">
                        </div>
                    </div>
                </div>

                <div class="premium-card rounded-[4rem] p-12 border border-white/5">
                    <h2 class="text-2xl font-black text-white tracking-tight mb-12">Social Proof Matrix</h2>
                    <div class="grid md:grid-cols-3 gap-10">
                        <div class="text-center group">
                            <label class="block text-[10px] font-black text-white/20 uppercase tracking-[0.4em] mb-6">User Base</label>
                            <input type="text" name="settings[stats_users]" value="{{ \App\Models\SiteSetting::getVal('stats_users', '15K+') }}" class="w-full bg-white/5 border border-white/10 rounded-[2.5rem] py-10 text-center text-white font-black text-4xl outline-none focus:border-amber-500 transition-all shadow-inner">
                        </div>
                        <div class="text-center group">
                            <label class="block text-[10px] font-black text-white/20 uppercase tracking-[0.4em] mb-6">Volume Shared</label>
                            <input type="text" name="settings[stats_files]" value="{{ \App\Models\SiteSetting::getVal('stats_files', '1.5M+') }}" class="w-full bg-white/5 border border-white/10 rounded-[2.5rem] py-10 text-center text-white font-black text-4xl outline-none focus:border-amber-500 transition-all shadow-inner">
                        </div>
                        <div class="text-center group">
                            <label class="block text-[10px] font-black text-white/20 uppercase tracking-[0.4em] mb-6">Active Instances</label>
                            <input type="text" name="settings[stats_bots]" value="{{ \App\Models\SiteSetting::getVal('stats_bots', '750+') }}" class="w-full bg-white/5 border border-white/10 rounded-[2.5rem] py-10 text-center text-white font-black text-4xl outline-none focus:border-amber-500 transition-all shadow-inner">
                        </div>
                    </div>
                </div>
            </div>

            <!-- BOT TAB -->
            <div id="content-bot" class="tab-content space-y-8 hidden animate-in fade-in duration-500">
                <div class="premium-card rounded-[4rem] p-12 border border-white/5 bg-gradient-to-br from-purple-900/10 to-transparent">
                    <h2 class="text-3xl font-black text-white tracking-tighter mb-12 flex items-center gap-4">
                        <i class="fab fa-telegram-plane text-purple-400"></i> Bot Intelligence
                    </h2>
                    <div class="space-y-12">
                        <div class="flex items-center justify-between p-8 bg-white/5 rounded-[2.5rem] border border-white/5 backdrop-blur-md">
                            <div>
                                <p class="text-white font-black text-lg">Hyper-Backup Protocol (Auto-Clone)</p>
                                <p class="text-white/30 text-[10px] font-bold uppercase tracking-widest mt-1">Automatic replication of all incoming files to master DB from regular admins.</p>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" name="auto_clone" value="1" {{ \App\Models\SiteSetting::where('key', 'auto_clone')->first()?->value == '1' ? 'checked' : '' }} class="sr-only peer">
                                <div class="w-20 h-10 bg-white/10 rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-1.5 after:left-[6px] after:bg-white after:rounded-full after:h-7 after:w-10 after:transition-all peer-checked:bg-purple-500 shadow-2xl"></div>
                            </label>
                        </div>
                        <div class="grid gap-10">
                            <div>
                                <label class="block text-[10px] font-black text-white/20 uppercase tracking-[0.3em] mb-4 font-mono ml-6">Global Advertisement Footer</label>
                                <textarea name="settings[bot_ad_text]" rows="5" placeholder="Support HTML: <b>Bold</b>, <i>Italic</i>" class="w-full bg-white/5 border border-white/10 rounded-[2.5rem] px-10 py-8 outline-none focus:border-purple-500 text-white font-medium text-lg h-48">{{ \App\Models\SiteSetting::where('key', 'bot_ad_text')->first()?->value }}</textarea>
                            </div>
                            <div>
                                <label class="block text-[10px] font-black text-white/20 uppercase tracking-[0.3em] mb-4 font-mono ml-6">Primary Call-to-Action Label</label>
                                <input type="text" name="settings[bot_ad_button]" value="{{ \App\Models\SiteSetting::where('key', 'bot_ad_button')->first()?->value }}" placeholder="Create Your Bot" class="w-full bg-white/5 border border-white/10 rounded-[2.5rem] px-10 py-6 outline-none focus:border-purple-500 text-white font-black tracking-widest uppercase text-xs">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Save Bar (Bottom Anchored) -->
            <div id="save-action-container" class="fixed bottom-0 left-0 right-0 p-8 z-[200] transition-all duration-700 opacity-0 pointer-events-none translate-y-full">
                <div class="max-w-6xl mx-auto">
                    <div class="bg-indigo-600/95 backdrop-blur-2xl border border-white/10 p-5 rounded-[2.5rem] shadow-[0_-30px_60px_rgba(0,0,0,0.6)] flex flex-col md:flex-row items-center justify-between px-12 gap-6 group hover:translate-y-[-4px] transition-all duration-300">
                        <div class="text-center md:text-left">
                            <p class="text-white font-black text-lg tracking-tight leading-none mb-1">Unsaved Configurations</p>
                            <p class="text-white/50 text-[10px] uppercase tracking-[0.3em] font-black">Ready to commit platform updates</p>
                        </div>
                        <button type="submit" class="w-full md:w-auto px-16 py-5 bg-white text-indigo-700 rounded-2xl font-black text-[11px] uppercase tracking-[0.2em] hover:bg-indigo-50 transition-all active:scale-95 shadow-2xl shadow-black/20">
                            Apply Changes Now
                        </button>
                    </div>
                </div>
            </div>
        </form>

        <!-- PLANS TAB (Independent Forms) -->
        <div id="content-plans" class="tab-content space-y-12 hidden animate-in fade-in duration-500">
            <div class="premium-card rounded-[4rem] p-12 border border-white/5 bg-white/5 backdrop-blur-md">
                <div class="flex flex-col md:flex-row justify-between items-end gap-8 mb-16 px-6">
                    <div>
                        <h3 class="text-4xl font-black text-white tracking-tighter italic">Tier Management</h3>
                        <p class="text-white/30 font-bold uppercase tracking-widest text-[10px] mt-2">Manage commercial subscription models</p>
                    </div>
                    <button type="button" onclick="showAddPlanModal()" class="px-10 py-5 bg-indigo-600 hover:bg-indigo-500 rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] text-white transition-all shadow-2xl shadow-indigo-600/40 active:scale-95">
                        <i class="fas fa-plus mr-3"></i> Create Tier
                    </button>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
                    @foreach($plans as $plan)
                        <div class="p-10 rounded-[3.5rem] bg-white/5 border border-white/10 hover:border-indigo-500/30 transition-all duration-500 flex flex-col justify-between group relative overflow-hidden">
                            <div class="absolute top-0 right-0 w-32 h-32 bg-indigo-500/5 blur-[50px] -mr-16 -mt-16 group-hover:bg-indigo-500/20 transition-all"></div>
                            <div>
                                <div class="flex justify-between items-start mb-8 font-mono text-[9px] font-black tracking-[0.3em]">
                                    <span class="text-white/10">#PLAN_{{ $plan->id }}</span>
                                    <div class="flex flex-col items-end gap-1">
                                        <span class="{{ $plan->is_active ? 'text-emerald-500' : 'text-red-500' }}">{{ $plan->is_active ? '● ONLINE' : '○ HIDDEN' }}</span>
                                        @if($plan->payment_link)
                                            <span class="text-indigo-400">● MIDTRANS SYNCED</span>
                                        @endif
                                    </div>
                                </div>
                                <h4 class="text-3xl font-black text-white mb-2 group-hover:text-indigo-400 transition-colors tracking-tight">{{ $plan->name }}</h4>
                                <div class="text-white/40 font-black text-xl mb-6 tracking-tighter">Rp {{ number_format($plan->price) }} <span class="text-[10px] uppercase ml-1 opacity-50">/ {{ $plan->duration_days }}D</span></div>
                                
                                @if($plan->payment_link)
                                    <a href="{{ $plan->payment_link }}" target="_blank" class="inline-flex items-center gap-2 px-4 py-2 bg-indigo-500/10 border border-indigo-500/20 rounded-xl text-[9px] font-black text-indigo-400 uppercase tracking-widest mb-8 hover:bg-indigo-500/20 transition-all">
                                        <i class="fas fa-link"></i> Payment Link
                                    </a>
                                @endif

                                <div class="space-y-4 mb-12">
                                    @php
                                        $features = [
                                            ['icon' => 'file-alt', 'val' => ($plan->file_limit ?: 'Unlimited') . ' Files'],
                                            ['icon' => 'server', 'val' => ($plan->max_file_size_mb ?: 'Unlimited') . ' MB/File'],
                                            ['icon' => 'users-cog', 'val' => ($plan->max_files_per_group ?: 'Unlimited') . ' per Group']
                                        ];
                                    @endphp
                                    @foreach($features as $f)
                                        <div class="flex items-center gap-4 text-white/50 font-bold text-xs uppercase tracking-tight">
                                            <div class="w-8 h-8 rounded-lg bg-white/5 flex items-center justify-center text-[10px]">
                                                <i class="fas fa-{{ $f['icon'] }} opacity-30"></i>
                                            </div>
                                            {{ $f['val'] }}
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <div class="flex gap-3 pt-6 border-t border-white/5 relative z-10">
                                <button type="button" onclick="editPlan({{ $plan }})" class="flex-1 py-4 bg-white/5 hover:bg-white/10 rounded-2xl text-[10px] font-black uppercase tracking-widest transition-all text-white">Modify</button>
                                <form action="{{ route('super.plans.destroy', $plan) }}" method="POST" onsubmit="return confirm('Archive this commercial tier?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="p-4 bg-red-500/10 hover:bg-red-500/20 rounded-2xl text-red-500 transition-all"><i class="fas fa-trash-alt"></i></button>
                                </form>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <!-- Tier Editor (Compact High Fidelity) -->
    <div id="tierModal" class="fixed inset-0 bg-black/95 backdrop-blur-3xl z-[300] hidden items-center justify-center p-2 md:p-4">
        <div class="w-full max-w-md bg-[#0a0f1e] border border-white/10 rounded-[2rem] overflow-hidden shadow-[0_0_100px_rgba(79,70,229,0.15)] animate-in zoom-in duration-300 max-h-[95vh] flex flex-col">
            <div class="px-6 py-4 border-b border-white/5 flex justify-between items-center bg-indigo-600/5">
                <h3 id="modalTitle" class="text-lg font-black text-white tracking-tighter italic">Tier Architect</h3>
                <button type="button" onclick="hidePlanModal()" class="w-8 h-8 rounded-lg bg-white/5 flex items-center justify-center text-white/20 hover:text-white hover:bg-white/10 transition-all font-light text-xl">×</button>
            </div>
            <form id="planForm" action="{{ route('super.plans.store') }}" method="POST" class="p-6 space-y-4 overflow-y-auto custom-scrollbar">
                @csrf
                <div id="methodField"></div>
                <div class="grid grid-cols-2 gap-4">
                    <div class="col-span-2">
                        <label class="block text-[9px] font-black text-white/20 uppercase tracking-[0.2em] mb-1.5 ml-2">Tier Name</label>
                        <input type="text" name="name" id="p_name" required class="w-full bg-white/5 border border-white/10 rounded-xl px-5 py-3 outline-none focus:border-indigo-500 text-white font-bold text-lg tracking-tight">
                    </div>
                    <div>
                        <label class="block text-[9px] font-black text-white/20 uppercase tracking-[0.2em] mb-1.5 ml-2 font-mono">Price (IDR)</label>
                        <input type="number" name="price" id="p_price" required class="w-full bg-white/5 border border-white/10 rounded-xl px-5 py-3 outline-none focus:border-indigo-500 text-white font-bold text-sm">
                    </div>
                    <div>
                        <label class="block text-[9px] font-black text-white/20 uppercase tracking-[0.2em] mb-1.5 ml-2 font-mono">Validity (Days)</label>
                        <input type="number" name="duration_days" id="p_duration" required class="w-full bg-white/5 border border-white/10 rounded-xl px-5 py-3 outline-none focus:border-indigo-500 text-white font-bold text-sm">
                    </div>
                    <div class="col-span-2 p-3 bg-indigo-500/5 rounded-xl border border-indigo-500/10">
                        <p class="text-[9px] text-white/40 font-medium leading-relaxed italic"><i class="fas fa-sync-alt mr-1 opacity-40"></i> Auto-generates **Midtrans Payment Link** upon save.</p>
                    </div>
                    <div class="col-span-2">
                         <div class="grid grid-cols-3 gap-3">
                            <div>
                                <label class="block text-[8px] font-black text-white/20 uppercase tracking-widest mb-1.5 ml-1">Quota</label>
                                <input type="number" name="file_limit" id="p_file_limit" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 outline-none focus:border-indigo-500 text-white text-[11px]">
                            </div>
                            <div>
                                <label class="block text-[8px] font-black text-white/20 uppercase tracking-widest mb-1.5 ml-1">MB/File</label>
                                <input type="number" name="max_file_size_mb" id="p_max_size" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 outline-none focus:border-indigo-500 text-white text-[11px]">
                            </div>
                            <div>
                                <label class="block text-[8px] font-black text-white/20 uppercase tracking-widest mb-1.5 ml-1">Cap</label>
                                <input type="number" name="max_files_per_group" id="p_max_group" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 outline-none focus:border-indigo-500 text-white text-[11px]">
                            </div>
                         </div>
                    </div>
                    <div class="col-span-2">
                        <label class="block text-[9px] font-black text-white/20 uppercase tracking-[0.2em] mb-1.5 ml-2 font-mono">Market Visibility</label>
                        <select name="is_active" id="p_active" class="w-full bg-white/5 border border-white/10 rounded-xl px-5 py-3 outline-none focus:border-indigo-500 text-white appearance-none cursor-pointer font-black uppercase text-[9px] tracking-widest">
                            <option value="1" class="bg-[#020617]">Live - Public Acquisition</option>
                            <option value="0" class="bg-[#020617]">Vaulted - Private Storage</option>
                        </select>
                    </div>
                </div>
                <div class="flex gap-3 pt-2">
                    <button type="button" onclick="hidePlanModal()" class="flex-1 py-4 bg-white/5 hover:bg-white/10 rounded-xl font-black text-white/30 uppercase tracking-widest text-[9px] transition-all">Cancel</button>
                    <button type="submit" class="flex-[1.5] py-4 bg-indigo-600 hover:bg-indigo-500 rounded-xl font-black text-white shadow-xl shadow-indigo-600/20 uppercase tracking-widest text-[9px] transition-all active:scale-95">Commit Tier</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        const statusIndicator = document.getElementById('status-indicator');
        const saveAction = document.getElementById('save-action-container');
        const form = document.getElementById('settings-form');

        function showUnsavedState() {
            statusIndicator.classList.replace('opacity-0', 'opacity-100');
            saveAction.classList.remove('opacity-0', 'translate-y-full', 'pointer-events-none');
        }

        function switchTab(tabName) {
            // Content Toggle
            document.querySelectorAll('.tab-content').forEach(c => c.classList.add('hidden'));
            document.getElementById('content-' + tabName)?.classList.remove('hidden');

            // Button Highlight
            document.querySelectorAll('.tab-btn').forEach(b => {
                b.classList.remove('bg-indigo-600', 'text-white', 'shadow-2xl', 'shadow-indigo-600/30');
                b.classList.add('text-white/30');
            });
            const active = document.getElementById('tab-' + tabName);
            if(active) {
                active.classList.remove('text-white/30');
                active.classList.add('bg-indigo-600', 'text-white', 'shadow-2xl', 'shadow-indigo-600/30');
            }

            // Persistence
            localStorage.setItem('super_global_tab', tabName);
        }

        // Init
        document.addEventListener('DOMContentLoaded', () => {
            const lastTab = localStorage.getItem('super_global_tab') || 'platform';
            switchTab(lastTab);

            // Change detection (excluding buttons and hidden fields)
            form.querySelectorAll('input:not([type="hidden"]), select, textarea').forEach(input => {
                input.addEventListener('change', showUnsavedState);
                input.addEventListener('input', showUnsavedState);
            });
        });

        function showAddPlanModal() {
            document.getElementById('modalTitle').innerText = 'Construct New Tier';
            document.getElementById('planForm').action = "{{ route('super.plans.store') }}";
            document.getElementById('methodField').innerHTML = '';
            document.getElementById('planForm').reset();
            document.getElementById('tierModal').style.display = 'flex';
        }

        function editPlan(plan) {
            document.getElementById('modalTitle').innerText = 'Modify Tier: ' + plan.name;
            document.getElementById('planForm').action = "{{ url('super/plans') }}/" + plan.id;
            document.getElementById('methodField').innerHTML = '<input type="hidden" name="_method" value="PUT">';
            
            document.getElementById('p_name').value = plan.name;
            document.getElementById('p_price').value = plan.price;
            document.getElementById('p_duration').value = plan.duration_days;
            document.getElementById('p_file_limit').value = plan.file_limit || 0;
            document.getElementById('p_max_size').value = plan.max_file_size_mb || 0;
            document.getElementById('p_max_group').value = plan.max_files_per_group || 0;
            document.getElementById('p_active').value = (plan.is_active == 1 || plan.is_active == true) ? "1" : "0";
            
            document.getElementById('tierModal').style.display = 'flex';
        }

        function hidePlanModal() {
            document.getElementById('tierModal').style.display = 'none';
        }

        async function testMidtrans() {
            const btn = document.getElementById('btn-test-midtrans');
            const result = document.getElementById('midtrans-test-result');
            const serverKey = document.getElementById('midtrans_server_key').value;
            const mode = document.querySelector('select[name="midtrans_mode"]').value;

            if (!serverKey) {
                alert('Please enter a Server Key first.');
                return;
            }

            btn.disabled = true;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Testing...';
            result.classList.add('hidden');

            try {
                const response = await fetch("{{ route('super.settings.test-midtrans') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    },
                    body: JSON.stringify({ server_key: serverKey, mode: mode })
                });

                const data = await response.json();
                
                result.classList.remove('hidden');
                result.innerText = data.message;
                
                if (data.success) {
                    result.classList.remove('text-red-500');
                    result.classList.add('text-emerald-500');
                } else {
                    result.classList.remove('text-emerald-500');
                    result.classList.add('text-red-500');
                }
            } catch (err) {
                result.classList.remove('hidden', 'text-emerald-500');
                result.classList.add('text-red-500');
                result.innerText = 'System Error: Failed to reach server.';
            } finally {
                btn.disabled = false;
                btn.innerHTML = '<i class="fas fa-plug"></i> Test Connection';
            }
        }
    </script>
@endpush