<x-app-layout>
    <style>
        @media (max-width: 767px) { .hide-mobile { display: none !important; } .show-mobile-block { display: block !important; } }
        @media (min-width: 768px) { .hide-desktop { display: none !important; } }
    </style>
    <div x-data="{ tab: '{{ session('active_tab', 'business') }}', testEmail: '', testOutput: '', testingSmtp: false }" class="space-y-6">
        
        <!-- Header -->
        <div class="flex flex-col md:flex-row md:items-center justify-between mb-8 gap-4 md:gap-0">
            <div class="flex items-center gap-3 md:gap-4">
                <div class="header-icon-size ios-icon-container shadow-lg flex items-center justify-center">
                    <img src="{{ asset('uploads/dashboard-icons/Settings.jpg') }}" alt="Settings" class="w-full h-full object-cover">
                </div>
                <div>
                    <h2 class="text-xl md:text-2xl font-bold text-slate-800">System Configuration</h2>
                    <p class="text-slate-500 text-sm md:text-sm mt-1">Configure company profiles, currency symbols, support tables, email routing, and data archives.</p>
                </div>
            </div>
        </div>

        <!-- Pill-style Navigation Tabs -->
        <div class="flex gap-1 md:gap-2 p-1 bg-slate-100 border-slate-200 rounded-2xl overflow-x-auto scrollbar-none">
            <button @click="tab = 'business'" :class="tab === 'business' ? 'bg-brand-50 text-brand-700 border-brand-200 shadow-sm' : 'text-slate-600 hover:text-slate-900 border-transparent'" 
                    class="py-2 md:py-2.5 px-3 md:px-5 font-semibold text-sm md:text-sm rounded-xl border transition-all duration-200 whitespace-nowrap shrink-0 flex items-center gap-1.5">
                🏢 Business
            </button>
            <button @click="tab = 'banks'" :class="tab === 'banks' ? 'bg-brand-50 text-brand-700 border-brand-200 shadow-sm' : 'text-slate-600 hover:text-slate-900 border-transparent'" 
                    class="py-2 md:py-2.5 px-3 md:px-5 font-semibold text-sm md:text-sm rounded-xl border transition-all duration-200 whitespace-nowrap shrink-0 flex items-center gap-1.5">
                🏦 Banks
            </button>
            <button @click="tab = 'support'" :class="tab === 'support' ? 'bg-brand-50 text-brand-700 border-brand-200 shadow-sm' : 'text-slate-600 hover:text-slate-900 border-transparent'" 
                    class="py-2 md:py-2.5 px-3 md:px-5 font-semibold text-sm md:text-sm rounded-xl border transition-all duration-200 whitespace-nowrap shrink-0 flex items-center gap-1.5">
                📋 Support
            </button>
            @if(!auth()->user()->isAccountant())
            <button @click="tab = 'smtp'" :class="tab === 'smtp' ? 'bg-brand-50 text-brand-700 border-brand-200 shadow-sm' : 'text-slate-600 hover:text-slate-900 border-transparent'" 
                    class="py-2 md:py-2.5 px-3 md:px-5 font-semibold text-sm md:text-sm rounded-xl border transition-all duration-200 whitespace-nowrap shrink-0 flex items-center gap-1.5">
                ✉️ SMTP
            </button>
            @endif
            <button @click="tab = 'vat'" :class="tab === 'vat' ? 'bg-brand-50 text-brand-700 border-brand-200 shadow-sm' : 'text-slate-600 hover:text-slate-900 border-transparent'" 
                    class="py-2 md:py-2.5 px-3 md:px-5 font-semibold text-sm md:text-sm rounded-xl border transition-all duration-200 whitespace-nowrap shrink-0 flex items-center gap-1.5">
                📊 VAT
            </button>
            @if(!auth()->user()->isAccountant())
            <button @click="tab = 'backups'" :class="tab === 'backups' ? 'bg-brand-50 text-brand-700 border-brand-200 shadow-sm' : 'text-slate-600 hover:text-slate-900 border-transparent'" 
                    class="py-2 md:py-2.5 px-3 md:px-5 font-semibold text-sm md:text-sm rounded-xl border transition-all duration-200 whitespace-nowrap shrink-0 flex items-center gap-1.5">
                💾 Backups
            </button>
            @endif
            <button @click="tab = 'maintenance'" :class="tab === 'maintenance' ? 'bg-brand-50 text-brand-700 border-brand-200 shadow-sm' : 'text-slate-600 hover:text-slate-900 border-transparent'" 
                    class="py-2 md:py-2.5 px-3 md:px-5 font-semibold text-sm md:text-sm rounded-xl border transition-all duration-200 whitespace-nowrap shrink-0 flex items-center gap-1.5">
                🛠️ Maintenance
            </button>
        </div>

        <!-- 1. BUSINESS PROFILE TAB -->
        <div x-show="tab === 'business'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="space-y-6">
            @php
                $logoUrl = null;
                $faviconUrl = null;
                
                $businessLogo = $settings['business_logo'] ?? null;
                $businessFavicon = $settings['business_favicon'] ?? null;
                $invoiceLogo = $settings['invoice_logo'] ?? null;
                
                if ($businessLogo) {
                    if (file_exists(public_path($businessLogo))) {
                        $logoUrl = asset($businessLogo) . '?v=' . filemtime(public_path($businessLogo));
                    }
                }
                
                if ($businessFavicon) {
                    if (file_exists(public_path($businessFavicon))) {
                        $faviconUrl = asset($businessFavicon) . '?v=' . filemtime(public_path($businessFavicon));
                    }
                }

                $invoiceLogoUrl = null;
                if ($invoiceLogo) {
                    if (file_exists(public_path($invoiceLogo))) {
                        $invoiceLogoUrl = asset($invoiceLogo) . '?v=' . filemtime(public_path($invoiceLogo));
                    }
                }
            @endphp
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <!-- Business Info Form -->
                <div class="lg:col-span-2 bg-white border border-slate-200 rounded-xl shadow-sm p-5">
                    <h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider mb-4 border-b border-slate-200 pb-2">📋 Business Profile Details</h3>
                    <form action="{{ route('settings.business') }}" method="POST" enctype="multipart/form-data" class="space-y-4">
                        @csrf
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Business Name</label>
                                <input type="text" name="business_name" value="{{ $settings['business_name'] ?? 'RentTrack Pro' }}" required
                                    class="w-full py-2 px-3 bg-white border-slate-300 focus:border-brand-500 focus:ring-0 rounded-xl text-slate-800 text-sm">
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Company Email</label>
                                <input type="email" name="business_email" value="{{ $settings['business_email'] ?? '' }}"
                                    class="w-full py-2 px-3 bg-white border-slate-300 focus:border-brand-500 focus:ring-0 rounded-xl text-slate-800 text-sm">
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Company Phone</label>
                                <input type="text" name="business_phone" value="{{ $settings['business_phone'] ?? '' }}"
                                    class="w-full py-2 px-3 bg-white border-slate-300 focus:border-brand-500 focus:ring-0 rounded-xl text-slate-800 text-sm">
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Tax Reference / VAT Number</label>
                                <input type="text" name="business_tax_ref" value="{{ $settings['business_tax_ref'] ?? '' }}" placeholder="e.g. UTR-12345"
                                    class="w-full py-2 px-3 bg-white border-slate-300 focus:border-brand-500 focus:ring-0 rounded-xl text-slate-800 text-sm">
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Registered Address</label>
                            <textarea name="business_address" rows="3"
                                class="w-full py-2 px-3 bg-white border-slate-300 focus:border-brand-500 focus:ring-0 rounded-xl text-slate-800 text-sm">{{ $settings['business_address'] ?? '' }}</textarea>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 border-t border-slate-200 pt-4">
                            <!-- Logo Input & Preview -->
                            <div class="space-y-2">
                                <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Business Logo</label>
                                <div class="flex items-center space-x-4">
                                    <div class="relative w-16 h-16 bg-white border border-slate-200 rounded-2xl overflow-hidden flex items-center justify-center">
                                        @if($logoUrl)
                                            <img src="{{ $logoUrl }}" alt="Logo Preview" class="w-full h-full object-contain p-1">
                                        @else
                                            <svg class="w-6 h-6 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                            </svg>
                                        @endif
                                    </div>
                                    <div class="flex-1">
                                        <input type="file" name="business_logo" accept="image/png, image/jpeg, image/jpg, image/svg+xml, image/webp"
                                            class="w-full py-1 text-slate-500 file:mr-4 file:py-1 file:px-3 file:rounded-xl file:border-0 file:text-sm file:font-semibold file:bg-brand-50 file:text-brand-700 hover:file:bg-brand-100 text-sm">
                                        <p class="text-xs text-slate-400 mt-1">Recommended: PNG or SVG. Max size 2MB.</p>
                                    </div>
                                </div>
                            </div>

                            <!-- Favicon Input & Preview -->
                            <div class="space-y-2">
                                <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Business Favicon</label>
                                <div class="flex items-center space-x-4">
                                    <div class="relative w-16 h-16 bg-white border border-slate-200 rounded-2xl overflow-hidden flex items-center justify-center">
                                        @if($faviconUrl)
                                            <img src="{{ $faviconUrl }}" alt="Favicon Preview" class="w-8 h-8 object-contain">
                                        @else
                                            <svg class="w-6 h-6 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3z"></path>
                                            </svg>
                                        @endif
                                    </div>
                                    <div class="flex-1">
                                        <input type="file" name="business_favicon" accept="image/png, image/x-icon, image/vnd.microsoft.icon, image/jpeg, image/jpg, image/svg+xml"
                                            class="w-full py-1 text-slate-500 file:mr-4 file:py-1 file:px-3 file:rounded-xl file:border-0 file:text-sm file:font-semibold file:bg-brand-50 file:text-brand-700 hover:file:bg-brand-100 text-sm">
                                        <p class="text-xs text-slate-400 mt-1">Recommended: ICO or PNG (32x32). Max size 2MB.</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 border-t border-slate-200 pt-4">
                            <!-- Invoice Logo Input & Preview -->
                            <div class="space-y-2">
                                <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Invoice Logo (for PDF)</label>
                                <div class="flex items-center space-x-4">
                                    <div class="relative w-16 h-16 bg-white border border-slate-200 rounded-2xl overflow-hidden flex items-center justify-center">
                                        @if($invoiceLogoUrl)
                                            <img src="{{ $invoiceLogoUrl }}" alt="Invoice Logo Preview" class="w-full h-full object-contain p-1">
                                        @else
                                            <svg class="w-6 h-6 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                            </svg>
                                        @endif
                                    </div>
                                    <div class="flex-1">
                                        <input type="file" name="invoice_logo" accept="image/png, image/jpeg, image/jpg, image/svg+xml, image/webp"
                                            class="w-full py-1 text-slate-500 file:mr-4 file:py-1 file:px-3 file:rounded-xl file:border-0 file:text-sm file:font-semibold file:bg-brand-50 file:text-brand-700 hover:file:bg-brand-100 text-sm">
                                        <p class="text-xs text-slate-400 mt-1">Recommended: PNG or SVG. Max size 2MB.</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="pt-2 flex justify-end">
                            <button type="submit" class="py-2.5 px-6 bg-brand-500 hover:bg-brand-600 text-white text-sm font-semibold rounded-xl transition">
                                Save Profile Details
                            </button>
                        </div>
                    </form>
                </div>

                <!-- Currency settings -->
                <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-5 h-max">
                    <h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider mb-4 border-b border-slate-200 pb-2">💱 Global Currency Settings</h3>
                    <form action="{{ route('settings.currency') }}" method="POST" class="space-y-4">
                        @csrf
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Base Currency Symbol</label>
                            <input type="text" name="currency_symbol" value="{{ $settings['currency_symbol'] ?? '£' }}" required placeholder="e.g. £, $, €"
                                class="w-full py-2 px-3 bg-white border border-slate-300 rounded-xl text-slate-850 text-sm">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Base Currency ISO Code</label>
                            <select name="base_currency_code" class="w-full py-2 px-3 bg-white border border-slate-300 rounded-xl text-slate-700 text-sm">
                                <option value="GBP" {{ ($settings['base_currency_code'] ?? 'GBP') === 'GBP' ? 'selected' : '' }}>GBP - British Pound</option>
                                <option value="USD" {{ ($settings['base_currency_code'] ?? '') === 'USD' ? 'selected' : '' }}>USD - US Dollar</option>
                                <option value="EUR" {{ ($settings['base_currency_code'] ?? '') === 'EUR' ? 'selected' : '' }}>EUR - Euro</option>
                                <option value="PKR" {{ ($settings['base_currency_code'] ?? '') === 'PKR' ? 'selected' : '' }}>PKR - Pakistani Rupee</option>
                                <option value="AED" {{ ($settings['base_currency_code'] ?? '') === 'AED' ? 'selected' : '' }}>AED - UAE Dirham</option>
                                <option value="SAR" {{ ($settings['base_currency_code'] ?? '') === 'SAR' ? 'selected' : '' }}>SAR - Saudi Riyal</option>
                                <option value="INR" {{ ($settings['base_currency_code'] ?? '') === 'INR' ? 'selected' : '' }}>INR - Indian Rupee</option>
                                <option value="JPY" {{ ($settings['base_currency_code'] ?? '') === 'JPY' ? 'selected' : '' }}>JPY - Japanese Yen</option>
                                <option value="CNY" {{ ($settings['base_currency_code'] ?? '') === 'CNY' ? 'selected' : '' }}>CNY - Chinese Yuan</option>
                                <option value="CAD" {{ ($settings['base_currency_code'] ?? '') === 'CAD' ? 'selected' : '' }}>CAD - Canadian Dollar</option>
                                <option value="AUD" {{ ($settings['base_currency_code'] ?? '') === 'AUD' ? 'selected' : '' }}>AUD - Australian Dollar</option>
                                <option value="CHF" {{ ($settings['base_currency_code'] ?? '') === 'CHF' ? 'selected' : '' }}>CHF - Swiss Franc</option>
                                <option value="SGD" {{ ($settings['base_currency_code'] ?? '') === 'SGD' ? 'selected' : '' }}>SGD - Singapore Dollar</option>
                                <option value="HKD" {{ ($settings['base_currency_code'] ?? '') === 'HKD' ? 'selected' : '' }}>HKD - Hong Kong Dollar</option>
                                <option value="NZD" {{ ($settings['base_currency_code'] ?? '') === 'NZD' ? 'selected' : '' }}>NZD - New Zealand Dollar</option>
                                <option value="TRY" {{ ($settings['base_currency_code'] ?? '') === 'TRY' ? 'selected' : '' }}>TRY - Turkish Lira</option>
                                <option value="ZAR" {{ ($settings['base_currency_code'] ?? '') === 'ZAR' ? 'selected' : '' }}>ZAR - South African Rand</option>
                                <option value="MYR" {{ ($settings['base_currency_code'] ?? '') === 'MYR' ? 'selected' : '' }}>MYR - Malaysian Ringgit</option>
                                <option value="THB" {{ ($settings['base_currency_code'] ?? '') === 'THB' ? 'selected' : '' }}>THB - Thai Baht</option>
                                <option value="QAR" {{ ($settings['base_currency_code'] ?? '') === 'QAR' ? 'selected' : '' }}>QAR - Qatari Riyal</option>
                                <option value="KWD" {{ ($settings['base_currency_code'] ?? '') === 'KWD' ? 'selected' : '' }}>KWD - Kuwaiti Dinar</option>
                                <option value="OMR" {{ ($settings['base_currency_code'] ?? '') === 'OMR' ? 'selected' : '' }}>OMR - Omani Rial</option>
                                <option value="BHD" {{ ($settings['base_currency_code'] ?? '') === 'BHD' ? 'selected' : '' }}>BHD - Bahraini Dinar</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Exchange Rate API Provider</label>
                            <select name="exchange_api_provider" class="w-full py-2 px-3 bg-white border border-slate-300 rounded-xl text-slate-700 text-sm">
                                <option value="fawaz" {{ ($settings['exchange_api_provider'] ?? 'fawaz') === 'fawaz' ? 'selected' : '' }}>Fawaz Ahmed API (Free, Keyless, 150+ Currencies)</option>
                                <option value="exchangerate_api_free" {{ ($settings['exchange_api_provider'] ?? '') === 'exchangerate_api_free' ? 'selected' : '' }}>ExchangeRate-API Free (Free, Keyless, Latest Only)</option>
                                <option value="frankfurter" {{ ($settings['exchange_api_provider'] ?? '') === 'frankfurter' ? 'selected' : '' }}>Frankfurter (Free, Keyless, 30 Major Currencies Only)</option>
                                <option value="exchangerate_api" {{ ($settings['exchange_api_provider'] ?? '') === 'exchangerate_api' ? 'selected' : '' }}>ExchangeRate-API Pro (Requires Key)</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Exchange API Key (if required)</label>
                            <input type="text" name="exchange_api_key" value="{{ $settings['exchange_api_key'] ?? '' }}" placeholder="Enter API key"
                                class="w-full py-2 px-3 bg-white border border-slate-300 rounded-xl text-slate-800 text-sm">
                        </div>
                        <div class="pt-2 flex justify-end">
                            <button type="submit" class="py-2.5 px-5 bg-brand-500 hover:bg-brand-600 text-white text-sm font-semibold rounded-xl transition">
                                Update Currency Settings
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- 2. BANK ACCOUNTS TAB -->
        <div x-show="tab === 'banks'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="space-y-6">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <!-- Add bank account -->
                <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-5 h-max">
                    <h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider mb-4 border-b border-slate-200 pb-2">🏦 Add Bank Account</h3>
                    <form action="{{ route('settings.bank-accounts.store') }}" method="POST" class="space-y-3">
                        @csrf
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Account Display Name</label>
                            <input type="text" name="name" required placeholder="e.g. Lloyds Business"
                                class="w-full py-2 px-3 bg-white border-slate-300 rounded-xl text-slate-800 text-sm">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Bank Institution Name</label>
                            <input type="text" name="bank_name" required placeholder="e.g. Lloyds Bank"
                                class="w-full py-2 px-3 bg-white border-slate-300 rounded-xl text-slate-800 text-sm">
                        </div>
                        <div class="grid grid-cols-2 gap-2">
                            <div>
                                <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Account No</label>
                                <input type="text" name="account_number" required placeholder="e.g. 12345678"
                                    class="w-full py-2 px-3 bg-white border-slate-300 rounded-xl text-slate-800 text-sm font-mono">
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Sort Code</label>
                                <input type="text" name="sort_code" placeholder="e.g. 11-22-33"
                                    class="w-full py-2 px-3 bg-white border-slate-300 rounded-xl text-slate-800 text-sm font-mono">
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Account Type</label>
                            <select name="type" class="w-full py-2 px-3 bg-white border-slate-300 rounded-xl text-slate-700 text-sm">
                                <option value="business">Business Account</option>
                                <option value="personal">Personal Account</option>
                            </select>
                        </div>
                        <div class="pt-2 flex justify-end">
                            <button type="submit" class="py-2.5 px-5 bg-brand-500 hover:bg-brand-600 text-white text-sm font-semibold rounded-xl transition">
                                Register Account
                            </button>
                        </div>
                    </form>
                </div>

                <!-- Accounts listing -->
                <div class="lg:col-span-2 bg-white border border-slate-200 rounded-xl shadow-sm p-5">
                    <h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider mb-4 border-b border-slate-200 pb-2">📋 Registered Accounts</h3>
                    
                    <!-- Desktop Table -->
                    <div class="hide-mobile overflow-x-auto">
                        <table class="w-full text-left text-sm border-collapse">
                            <thead>
                                <tr class="border-b border-slate-200 text-slate-400 uppercase tracking-wider">
                                    <th class="pb-3 font-semibold">Account Name</th>
                                    <th class="pb-3 font-semibold">Bank Name</th>
                                    <th class="pb-3 font-semibold">Details</th>
                                    <th class="pb-3 font-semibold">Type</th>
                                    <th class="pb-3 font-semibold text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-200">
                                @forelse($bankAccounts as $acc)
                                    <tr class="hover:bg-slate-50">
                                        <td class="py-3 font-bold text-slate-700">{{ $acc->name }}</td>
                                        <td class="py-3 text-slate-600">{{ $acc->bank_name }}</td>
                                        <td class="py-3 font-mono text-slate-500">
                                            A/C: {{ $acc->account_number }}
                                            @if($acc->sort_code)
                                                <span class="block text-xs text-slate-400">Sort: {{ $acc->sort_code }}</span>
                                            @endif
                                        </td>
                                        <td class="py-3 uppercase text-sm text-brand-500 font-semibold">{{ $acc->type }}</td>
                                        <td class="py-3 text-center">
                                            <form action="{{ route('settings.bank-accounts.destroy', $acc->id) }}" method="POST" onsubmit="return confirm('Deleting bank account will drop references. Delete?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="text-red-600 hover:underline">Remove</button>
                                            </form>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="py-8 text-center text-slate-400">No bank accounts registered.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- Mobile Cards -->
                    <div class="hide-desktop space-y-3">
                        @forelse($bankAccounts as $acc)
                            <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-5 space-y-3">
                                <div class="flex justify-between items-start">
                                    <div>
                                        <span class="font-bold text-sm text-slate-800 block">{{ $acc->name }}</span>
                                        <span class="text-sm text-slate-500">{{ $acc->bank_name }}</span>
                                    </div>
                                    <span class="text-xs uppercase text-brand-500 font-semibold px-2 py-0.5 bg-brand-50 rounded-full">{{ $acc->type }}</span>
                                </div>
                                <div class="text-sm font-mono text-slate-500 bg-slate-50 p-2 rounded-xl border border-slate-200">
                                    A/C: {{ $acc->account_number }}
                                    @if($acc->sort_code) <span class="block text-slate-400">Sort: {{ $acc->sort_code }}</span> @endif
                                </div>
                                <div class="flex justify-end pt-2 border-t border-slate-200">
                                    <form action="{{ route('settings.bank-accounts.destroy', $acc->id) }}" method="POST" onsubmit="return confirm('Deleting bank account will drop references. Delete?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="py-2 px-4 bg-red-50 text-red-600 rounded-xl text-sm font-semibold hover:bg-red-100 transition">Remove</button>
                                    </form>
                                </div>
                            </div>
                        @empty
                            <div class="py-8 text-center text-slate-400 text-sm">No bank accounts registered.</div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

        <!-- 3. SUPPORT TABLES TAB -->
        <div x-show="tab === 'support'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="space-y-6">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- 3.1 Payment Methods -->
                <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-5 space-y-4">
                    <h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider border-b border-slate-200 pb-2">💳 Payment Methods</h3>
                    
                    <form action="{{ route('settings.payment-methods.store') }}" method="POST" class="flex gap-2">
                        @csrf
                        <input type="text" name="name" required placeholder="New method..."
                            class="flex-1 py-1.5 px-3 bg-white border-slate-300 rounded-xl text-slate-800 text-sm">
                        <button type="submit" class="py-1.5 px-3 bg-brand-500 text-white rounded-xl text-sm font-semibold hover:bg-brand-600">+</button>
                    </form>

                    <div class="max-h-64 overflow-y-auto space-y-1.5 pr-1 scrollbar-thin">
                        @foreach($paymentMethods as $m)
                            <div class="flex justify-between items-center text-sm bg-slate-50 p-2 rounded-xl border border-slate-200">
                                <span class="text-slate-700 font-medium">{{ $m->name }}</span>
                                <form action="{{ route('settings.payment-methods.destroy', $m->id) }}" method="POST">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-red-600 text-sm hover:underline">&times;</button>
                                </form>
                            </div>
                        @endforeach
                    </div>
                </div>

                <!-- 3.2 Transaction Types -->
                <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-5 space-y-4">
                    <h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider border-b border-slate-200 pb-2">🏷 Transaction Types</h3>
                    
                    <form action="{{ route('settings.payment-types.store') }}" method="POST" class="space-y-2 bg-slate-50 p-3 rounded-2xl border border-slate-200">
                        @csrf
                        <input type="text" name="name" required placeholder="Type name (e.g. Deposit)"
                            class="w-full py-1.5 px-3 bg-white border-slate-300 rounded-xl text-slate-800 text-sm">
                        <div class="flex gap-2 items-center justify-between">
                            <select name="direction" class="py-1 px-2.5 bg-white border-slate-300 rounded-lg text-slate-700 text-sm">
                                <option value="in">Inflow (+)</option>
                                <option value="out">Outflow (-)</option>
                            </select>
                            <button type="submit" class="py-1 px-4 bg-brand-500 text-white rounded-lg text-sm font-semibold hover:bg-brand-600">Add</button>
                        </div>
                    </form>

                    <div class="max-h-48 overflow-y-auto space-y-1.5 pr-1 scrollbar-thin">
                        <div class="text-xs font-bold text-brand-500 uppercase tracking-wider mb-1">Inflow Types</div>
                        @foreach($paymentTypesIn as $type)
                            <div class="flex justify-between items-center text-sm bg-slate-50 p-2 rounded-xl border border-slate-200">
                                <span class="text-slate-700">{{ $type->name }}</span>
                                <form action="{{ route('settings.payment-types.destroy', $type->id) }}" method="POST">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-red-600 text-sm hover:underline">&times;</button>
                                </form>
                            </div>
                        @endforeach

                        <div class="text-xs font-bold text-rose-600 uppercase tracking-wider mt-3 mb-1">Outflow Types</div>
                        @foreach($paymentTypesOut as $type)
                            <div class="flex justify-between items-center text-sm bg-slate-50 p-2 rounded-xl border border-slate-200">
                                <span class="text-slate-700">{{ $type->name }}</span>
                                <form action="{{ route('settings.payment-types.destroy', $type->id) }}" method="POST">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-red-600 text-sm hover:underline">&times;</button>
                                </form>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        @if(!auth()->user()->isAccountant())
        <!-- 4. SMTP TAB -->
        <div x-show="tab === 'smtp'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="space-y-6">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <!-- Config credentials -->
                <div class="lg:col-span-2 bg-white border border-slate-200 rounded-xl shadow-sm p-5">
                    <h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider mb-4 border-b border-slate-200 pb-2">✉️ SMTP server Credentials</h3>
                    <form action="{{ route('settings.smtp') }}" method="POST" class="space-y-4">
                        @csrf
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">SMTP Host Server</label>
                                <input type="text" name="smtp_host" value="{{ $settings['smtp_host'] ?? '127.0.0.1' }}" required placeholder="e.g. smtp.mailtrap.io"
                                    class="w-full py-2 px-3 bg-white border-slate-300 focus:border-brand-500 focus:ring-0 rounded-xl text-slate-800 text-sm">
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">SMTP Port Number</label>
                                <input type="number" name="smtp_port" value="{{ $settings['smtp_port'] ?? '2525' }}" required placeholder="e.g. 587"
                                    class="w-full py-2 px-3 bg-white border-slate-300 focus:border-brand-500 focus:ring-0 rounded-xl text-slate-800 text-sm font-mono">
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">SMTP Username</label>
                                <input type="text" name="smtp_username" value="{{ $settings['smtp_username'] ?? '' }}"
                                    class="w-full py-2 px-3 bg-white border-slate-300 focus:border-brand-500 focus:ring-0 rounded-xl text-slate-800 text-sm">
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">SMTP Password</label>
                                <input type="password" name="smtp_password" value="{{ $settings['smtp_password'] ?? '' }}"
                                    class="w-full py-2 px-3 bg-white border-slate-300 focus:border-brand-500 focus:ring-0 rounded-xl text-slate-800 text-sm">
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Transport Encryption</label>
                                <select name="smtp_encryption" class="w-full py-2 px-3 bg-white border-slate-300 rounded-xl text-slate-700 text-sm">
                                    <option value="" {{ ($settings['smtp_encryption'] ?? '') === '' ? 'selected' : '' }}>None</option>
                                    <option value="tls" {{ ($settings['smtp_encryption'] ?? '') === 'tls' ? 'selected' : '' }}>TLS</option>
                                    <option value="ssl" {{ ($settings['smtp_encryption'] ?? '') === 'ssl' ? 'selected' : '' }}>SSL</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Sender 'From' Email Address</label>
                                <input type="email" name="smtp_from_address" value="{{ $settings['smtp_from_address'] ?? 'noreply@renttrack.co.uk' }}" required
                                    class="w-full py-2 px-3 bg-white border-slate-300 focus:border-brand-500 focus:ring-0 rounded-xl text-slate-800 text-sm">
                            </div>
                        </div>
                        <div class="pt-2 flex justify-end">
                            <button type="submit" class="py-2.5 px-6 bg-brand-500 hover:bg-brand-600 text-white text-sm font-semibold rounded-xl transition">
                                Save SMTP Configuration
                            </button>
                        </div>
                    </form>
                </div>

                <!-- Test Connection Panel -->
                <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-5 h-max space-y-4">
                    <h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider border-b border-slate-200 pb-2">🧪 Test Mail Connection</h3>
                    <div class="space-y-3">
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Send Test Email to:</label>
                            <input type="email" x-model="testEmail" placeholder="yourname@gmail.com"
                                class="w-full py-2 px-3 bg-white border-slate-300 focus:border-brand-500 focus:ring-0 rounded-xl text-slate-800 text-sm">
                        </div>
                        <button type="button" 
                                @click="
                                    if(!testEmail) { alert('Please enter email address.'); return; }
                                    testingSmtp = true;
                                    testOutput = '';
                                    fetch('{{ route('settings.smtp.test') }}', {
                                        method: 'POST',
                                        headers: {
                                            'Content-Type': 'application/json',
                                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                        },
                                        body: JSON.stringify({ test_email: testEmail })
                                    })
                                    .then(res => res.json())
                                    .then(data => {
                                        testingSmtp = false;
                                        testOutput = data.message;
                                    })
                                    .catch(err => {
                                        testingSmtp = false;
                                        testOutput = 'Failed to execute AJAX request.';
                                    });
                                "
                                :disabled="testingSmtp"
                                class="w-full py-2 bg-brand-500 hover:bg-brand-600 disabled:opacity-50 text-white font-bold rounded-xl text-sm transition duration-150 flex items-center justify-center">
                            <template x-if="testingSmtp">
                                <span class="animate-spin rounded-full h-3 w-3 border-2 border-white border-t-transparent mr-2"></span>
                            </template>
                            <span>Trigger Test Mail</span>
                        </button>

                        <div x-show="testOutput" style="display:none;" class="bg-slate-50 p-3 rounded-xl border border-slate-200 text-sm font-mono text-slate-500 break-words">
                            <span class="font-bold text-slate-700 block mb-1">Server Response:</span>
                            <span x-text="testOutput"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif

        <!-- 5. VAT / TAX TAB -->
        <div x-show="tab === 'vat'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="space-y-6">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <div class="lg:col-span-2 bg-white border border-slate-200 rounded-xl shadow-sm p-5">
                    <h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider mb-4 border-b border-slate-200 pb-2">📊 VAT Configuration</h3>
                    <form action="{{ route('settings.vat') }}" method="POST" class="space-y-4">
                        @csrf
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Default VAT Rate (%)</label>
                                <select name="vat_default_rate" class="w-full py-2 px-3 bg-white border-slate-300 rounded-xl text-slate-700 text-sm">
                                    <option value="">No default</option>
                                    <option value="20" {{ ($settings['vat_default_rate'] ?? '') == '20' ? 'selected' : '' }}>Standard 20%</option>
                                    <option value="5" {{ ($settings['vat_default_rate'] ?? '') == '5' ? 'selected' : '' }}>Reduced 5%</option>
                                    <option value="0" {{ ($settings['vat_default_rate'] ?? '') == '0' ? 'selected' : '' }}>Zero 0%</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">VAT Registration Number</label>
                                <input type="text" name="vat_registration_no" value="{{ $settings['vat_registration_no'] ?? '' }}" placeholder="e.g. GB123456789"
                                    class="w-full py-2 px-3 bg-white border-slate-300 focus:border-brand-500 focus:ring-0 rounded-xl text-slate-800 text-sm">
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">MTD VRN (Making Tax Digital)</label>
                                <input type="text" name="vat_mtd_vrn" value="{{ $settings['vat_mtd_vrn'] ?? '' }}" placeholder="e.g. 123456789"
                                    class="w-full py-2 px-3 bg-white border-slate-300 focus:border-brand-500 focus:ring-0 rounded-xl text-slate-800 text-sm">
                            </div>
                        </div>
                        <div class="pt-2 flex justify-end">
                            <button type="submit" class="py-2.5 px-6 bg-brand-500 hover:bg-brand-600 text-white text-sm font-semibold rounded-xl transition">
                                Save VAT Settings
                            </button>
                        </div>
                    </form>
                </div>
                <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-5 h-max space-y-4">
                    <h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider border-b border-slate-200 pb-2">📘 HMRC Notes</h3>
                    <div class="text-sm text-slate-500 space-y-2">
                        <p>VAT fields are optional on every transaction. If no VAT rate is selected, the full amount is treated as net.</p>
                        <p class="border-t border-slate-200 pt-2">Default VAT rate pre-selects the rate when adding new income/expenses but can be overridden per transaction.</p>
                        <p class="border-t border-slate-200 pt-2">MTD integration coming soon — enter your VRN now for future compatibility.</p>
                    </div>
                </div>
            </div>
        </div>

        @if(!auth()->user()->isAccountant())
        <!-- 6. BACKUPS TAB -->
        <div x-show="tab === 'backups'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="space-y-6">
            <!-- Deployment toolkits / public link symlink mapping -->
            <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-5">
                <div class="flex flex-col md:flex-row md:items-center justify-between">
                    <div>
                        <h3 class="font-bold text-base text-slate-800">cPanel Storage Symlink Mapper</h3>
                        <p class="text-sm text-slate-500 mt-1">If files, receipts, or documents fail to load, run this builder to establish the public storage symlink. The symlink is also auto-created at app boot.</p>
                    </div>
                    <form action="{{ route('settings.storage-link') }}" method="POST" class="mt-4 md:mt-0">
                        @csrf
                        <button type="submit" class="py-2.5 px-6 bg-brand-50 hover:bg-brand-100 border border-brand-200 text-brand-700 font-bold rounded-xl text-sm transition duration-150">
                            🔗 Map Public Storage Symlink
                        </button>
                    </form>
                </div>
            </div>

            <!-- Auto Backup & Upload Restore Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- 1. Auto-Backup Settings -->
                <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-5 space-y-4">
                    <h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider border-b border-slate-200 pb-2">⏰ Auto-Backup Settings</h3>
                    <p class="text-xs text-slate-500">Automatically backup database & files every 6 hours. Keeps only the latest 2 backups to save disk space.</p>
                    <form action="{{ route('settings.backups.auto-toggle') }}" method="POST">
                        @csrf
                        <div class="flex items-center justify-between pt-2">
                            <div>
                                <span class="text-sm font-semibold text-slate-700">Enable Auto-Backup</span>
                            </div>
                            <label class="switch-container">
                                <input type="checkbox" name="auto_backup" value="1" {{ (\App\Models\Setting::where('key', 'auto_backup')->value('value') ?? '0') === '1' ? 'checked' : '' }} class="switch-input" onchange="this.form.submit()">
                                <span class="switch-slider"></span>
                            </label>
                        </div>
                    </form>
                </div>

                <!-- 2. Upload & Restore Backup -->
                <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-5 space-y-4">
                    <h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider border-b border-slate-200 pb-2">📤 Upload & Restore Backup</h3>
                    <p class="text-xs text-slate-500">Upload a previously generated system backup ZIP file to restore the entire database and assets.</p>
                    <form action="{{ route('settings.backups.upload-restore') }}" method="POST" enctype="multipart/form-data" class="flex items-center gap-3">
                        @csrf
                        <div class="flex-1">
                            <input type="file" name="backup_file" accept=".zip" required class="w-full py-1.5 px-3 bg-white border border-slate-300 rounded-xl text-slate-800 text-sm">
                        </div>
                        <button type="submit" onclick="return confirm('WARNING: Restoring will overwrite all existing database records and uploaded files. Proceed?')" class="py-2.5 px-4 bg-amber-600 hover:bg-amber-700 text-white text-xs font-bold rounded-xl shadow-sm transition whitespace-nowrap">
                            Restore System
                        </button>
                    </form>
                </div>
            </div>

            <!-- Spatie database backups listing & archive builder -->
            <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-5 space-y-6">
                <div class="flex justify-between items-center border-b border-slate-200 pb-3">
                    <div>
                        <h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider">💾 Full System Backup Archives</h3>
                        <p class="text-sm text-slate-600 mt-0.5">Complete system backups containing database dump + all uploaded receipts, documents, photos, logo, and favicon files.</p>
                    </div>
                    <form action="{{ route('settings.backups.create') }}" method="POST">
                        @csrf
                        <button type="submit" class="py-2.5 px-5 bg-brand-500 hover:bg-brand-600 text-white text-sm font-bold rounded-xl shadow-sm transition">
                            💾 Build Full System Backup
                        </button>
                    </form>
                </div>

                <!-- Desktop Table -->
                <div class="hide-mobile overflow-x-auto">
                    <table class="w-full text-left text-sm border-collapse">
                        <thead>
                            <tr class="border-b border-slate-200 text-slate-400 uppercase tracking-wider">
                                <th class="pb-3 font-semibold">Backup Filename</th>
                                <th class="pb-3 font-semibold">Archive Size</th>
                                <th class="pb-3 font-semibold">Created Date</th>
                                <th class="pb-3 font-semibold text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-200">
                            @forelse($backups as $b)
                                <tr class="hover:bg-slate-50">
                                    <td class="py-3 font-bold text-slate-700 font-mono">{{ $b['filename'] }}</td>
                                    <td class="py-3 text-slate-600 font-mono">{{ number_format($b['size'] / 1024, 1) }} KB</td>
                                    <td class="py-3 text-slate-500">{{ date('d M Y H:i:s', $b['date']) }}</td>
                                    <td class="py-3 text-center">
                                        <div class="flex justify-center items-center space-x-3">
                                            <a href="{{ route('settings.backups.download', $b['filename']) }}" 
                                               class="text-brand-500 hover:underline font-semibold">Download</a>
                                            
                                            <form action="{{ route('settings.backups.restore', $b['filename']) }}" method="POST" onsubmit="return confirm('WARNING: Entire database + all uploaded files (receipts, photos, documents) will be replaced with the backup data. Proceed with full system restore?')">
                                                @csrf
                                                <button type="submit" class="text-amber-700 hover:underline font-semibold">Restore System</button>
                                            </form>

                                            <form action="{{ route('settings.backups.destroy', $b['filename']) }}" method="POST" onsubmit="return confirm('Permanently delete this backup archive?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="text-red-600 hover:underline font-semibold">Delete</button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="py-12 text-center text-slate-400">
                                        <span class="text-3xl mb-2 block">📁</span>
                                        <span>No backup archives found. Build a full system backup to archive database + all uploaded files.</span>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <!-- Mobile Cards -->
                <div class="hide-desktop space-y-3">
                    @forelse($backups as $b)
                        <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-5 space-y-3">
                            <div class="flex justify-between items-start">
                                <div class="flex-1 min-w-0 pr-2">
                                    <span class="text-sm font-mono font-bold text-slate-700 truncate block">{{ $b['filename'] }}</span>
                                    <span class="text-xs text-slate-500">{{ date('d M Y H:i:s', $b['date']) }}</span>
                                </div>
                                <span class="text-sm font-mono text-slate-600 whitespace-nowrap">{{ number_format($b['size'] / 1024, 1) }} KB</span>
                            </div>
                            <div class="flex justify-end gap-2 pt-2 border-t border-slate-200">
                                <a href="{{ route('settings.backups.download', $b['filename']) }}" 
                                   class="py-2 px-3 bg-brand-50 border-brand-200 text-brand-700 rounded-xl text-sm font-semibold hover:bg-brand-100 transition">Download</a>
                                <form action="{{ route('settings.backups.restore', $b['filename']) }}" method="POST" onsubmit="return confirm('WARNING: Entire database + all uploaded files (receipts, photos, documents) will be replaced with the backup data. Proceed with full system restore?')">
                                    @csrf
                                    <button type="submit" class="py-2 px-3 bg-amber-50 border-amber-200 text-amber-700 rounded-xl text-sm font-semibold hover:bg-amber-100 transition">Restore System</button>
                                </form>
                                <form action="{{ route('settings.backups.destroy', $b['filename']) }}" method="POST" onsubmit="return confirm('Permanently delete this backup archive?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="py-2 px-3 bg-red-50 border-red-200 text-red-600 rounded-xl text-sm font-semibold hover:bg-red-100 transition">Delete</button>
                                </form>
                            </div>
                        </div>
                    @empty
                        <div class="py-8 text-center text-slate-400 text-sm">No backup archives found on storage.</div>
                    @endforelse
                </div>
            </div>
        </div>
        @endif

        <!-- 7. MAINTENANCE TAB -->
        <div x-show="tab === 'maintenance'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="space-y-6">
            <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-5">
                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                    <div>
                        <h3 class="font-bold text-base text-slate-800">Clear Application Cache</h3>
                        <p class="text-sm text-slate-500 mt-1">Clear config, route, view, and application cache. Use after deploying updates or if views show stale data.</p>
                    </div>
                    <form action="{{ route('settings.clear-cache') }}" method="POST" onsubmit="return confirm('Clear all application caches?')">
                        @csrf
                        <button type="submit" class="py-2.5 px-6 bg-amber-50 hover:bg-amber-600 text-amber-700 hover:text-white border border-amber-200 hover:border-amber-500 font-bold rounded-xl text-sm transition duration-150">
                            🗑️ Clear All Cache
                        </button>
                    </form>
                </div>
            </div>

            <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-5 mt-6">
                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                    <div>
                        <h3 class="font-bold text-base text-slate-800">Refresh Public Storage Symlink</h3>
                        <p class="text-sm text-slate-500 mt-1">Re-create the public/storage symlink if files/receipts fail to load. Also runs on app boot.</p>
                    </div>
                    <form action="{{ route('settings.storage-link') }}" method="POST">
                        @csrf
                        <button type="submit" class="py-2.5 px-6 bg-brand-50 hover:bg-brand-100 border border-brand-200 text-brand-700 font-bold rounded-xl text-sm transition duration-150">
                            🔗 Map Public Storage Symlink
                        </button>
                    </form>
                </div>
            </div>

            <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-5 mt-6">
                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                    <div>
                        <h3 class="font-bold text-base text-slate-800">Refresh Application</h3>
                        <p class="text-sm text-slate-500 mt-1">Clear cache AND refresh storage link in one action. Useful after code deployments.</p>
                    </div>
                    <form action="{{ route('settings.clear-cache') }}" method="POST" onsubmit="return confirm('Clear cache AND refresh storage link?')">
                        @csrf
                        <button type="submit" class="py-2.5 px-6 bg-brand-50 hover:bg-brand-600 text-brand-700 hover:text-white border border-brand-200 hover:border-brand-500 font-bold rounded-xl text-sm transition duration-150">
                            🔄 Refresh All (Cache + Storage)
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
