@extends('layouts.app')

@section('title', 'Settings')

@section('content')
@php
    $tabs = [
        'branding' => ['label' => 'Branding', 'icon' => 'sparkles'],
        'notifications' => ['label' => 'Notifications', 'icon' => 'alerts'],
        'sms' => ['label' => 'SMS Gateway', 'icon' => 'messages'],
        'email' => ['label' => 'Email Gateway', 'icon' => 'mail'],
        'payments' => ['label' => 'Payments', 'icon' => 'bolt'],
        'integrations' => ['label' => 'Integrations', 'icon' => 'bolt'],
        'sounds' => ['label' => 'Sounds', 'icon' => 'signal'],
        'departments' => ['label' => 'Departments', 'icon' => 'users'],
        'roles' => ['label' => 'Roles', 'icon' => 'shield'],
        'backup' => ['label' => 'Backup', 'icon' => 'database'],
        'audit' => ['label' => 'Audit', 'icon' => 'clipboard'],
        'theme' => ['label' => 'Theme', 'icon' => 'sun'],
        'maintenance' => ['label' => 'Maintenance', 'icon' => 'wrench'],
        'security' => ['label' => 'Security', 'icon' => 'shield'],
    ];
@endphp

<x-page-header title="Settings" subtitle="Configure application branding, alerts, backups, and system behavior" icon="settings" icon-color="violet">
    <x-slot:actions>
        <div x-data="themeToggle()" x-init="init()" class="hidden sm:block">
            <button type="button" @click="toggle()" class="btn-secondary btn-sm">
                <x-icon name="sun" class="w-4 h-4" x-show="!isLight" x-cloak />
                <x-icon name="moon" class="w-4 h-4" x-show="isLight" x-cloak />
                <span x-text="isLight ? 'Light mode' : 'Dark mode'"></span>
            </button>
        </div>
    </x-slot:actions>
</x-page-header>

@if (!empty($company?->company_number))
    <div class="mb-6">
        @include('partials.company-number', ['company' => $company])
    </div>
@endif

<div class="flex flex-col lg:flex-row gap-6 animate-slide-up">
    {{-- Tab navigation --}}
    <nav class="glass-card-subtle p-2 lg:w-56 shrink-0 flex lg:flex-col gap-1 overflow-x-auto">
        @foreach ($tabs as $key => $meta)
            <a href="{{ route('settings.index', ['tab' => $key]) }}"
               class="nav-link whitespace-nowrap {{ $tab === $key ? 'nav-link-active' : 'nav-link-inactive' }}">
                <x-icon :name="$meta['icon']" class="w-4 h-4 shrink-0" />
                {{ $meta['label'] }}
            </a>
        @endforeach
    </nav>

    <div class="flex-1 min-w-0">
        @if ($tab === 'branding')
            <div class="glass-card p-5 sm:p-6">
                <h3 class="text-lg font-semibold mb-1 flex items-center gap-2">
                    <x-icon name="sparkles" class="w-5 h-5 text-teal-600 animate-icon-pulse" />
                    Branding
                </h3>
                <p class="text-sm text-themed-muted mb-6">
                    @if (!empty($isPlatformBranding))
                        Platform name, logo, and favicon shown when companies have not unlocked custom branding.
                    @else
                        Customize your company name, logo, and favicon on the web portal and mobile apps.
                    @endif
                </p>

                @if (empty($brandingUnlocked) && empty($isPlatformBranding))
                    <div class="rounded-xl border border-themed bg-themed-subtle p-5 mb-6 space-y-4">
                        <p class="text-sm">
                            Custom branding is a one-time add-on
                            (<strong class="text-themed">{{ \App\Support\Currency::format((float) ($brandingAddonPrice ?? 1), $brandingAddonCurrency ?? 'USD') }}</strong>).
                            After payment, your logo and app name appear on the dashboard and registered devices.
                        </p>
                        @if (auth()->user()?->isAdmin())
                            <form method="POST" action="{{ route('billing.branding-checkout') }}" class="space-y-4">
                                @csrf
                                @include('partials.payment-gateway-picker', [
                                    'paymentGateways' => $availablePaymentGateways ?? [],
                                    'selectedPaymentProvider' => old('payment_provider', ($availablePaymentGateways[0]['id'] ?? '')),
                                    'style' => 'app',
                                ])
                                <button type="submit" class="btn-primary">Unlock branding — {{ \App\Support\Currency::format((float) ($brandingAddonPrice ?? 1), $brandingAddonCurrency ?? 'USD') }}</button>
                            </form>
                        @else
                            <p class="text-sm text-themed-muted">Ask a company admin to unlock this add-on.</p>
                        @endif
                    </div>
                @else
                    <form method="POST" action="{{ route('settings.branding') }}" enctype="multipart/form-data" class="space-y-5">
                        @csrf
                        @method('PUT')

                        <div>
                            <label class="field-label" for="app_name">Application name</label>
                            <input id="app_name" type="text" name="app_name" value="{{ old('app_name', $settings['app_name']) }}" required class="field-input">
                        </div>

                        <div class="grid sm:grid-cols-2 gap-5">
                            <div>
                                <label class="field-label">Logo</label>
                                @if (!empty($settings['logo_path']))
                                    <div class="mb-3 flex items-center gap-3 p-3 rounded-xl border border-themed bg-themed-subtle">
                                        <img src="{{ Storage::disk('public')->url($settings['logo_path']) }}" alt="Current logo" class="h-12 w-12 object-contain rounded-lg">
                                        <label class="flex items-center gap-2 text-sm text-themed-muted cursor-pointer">
                                            <input type="checkbox" name="remove_logo" value="1" class="rounded border-themed">
                                            Remove logo
                                        </label>
                                    </div>
                                @endif
                                <input type="file" name="logo" accept="image/*" class="field-input file:mr-3 file:rounded-lg file:border-0 file:bg-teal-700 file:px-3 file:py-1.5 file:text-sm file:text-white">
                                <p class="text-xs text-themed-muted mt-1">PNG, JPG, SVG. Max 2 MB. Recommended 256×256.</p>
                            </div>
                            <div>
                                <label class="field-label">Favicon</label>
                                @if (!empty($settings['favicon_path']))
                                    <div class="mb-3 flex items-center gap-3 p-3 rounded-xl border border-themed bg-themed-subtle">
                                        <img src="{{ Storage::disk('public')->url($settings['favicon_path']) }}" alt="Current favicon" class="h-8 w-8 object-contain">
                                        <label class="flex items-center gap-2 text-sm text-themed-muted cursor-pointer">
                                            <input type="checkbox" name="remove_favicon" value="1" class="rounded border-themed">
                                            Remove favicon
                                        </label>
                                    </div>
                                @endif
                                <input type="file" name="favicon" accept=".png,.ico,.svg,.jpg,.jpeg" class="field-input file:mr-3 file:rounded-lg file:border-0 file:bg-teal-700 file:px-3 file:py-1.5 file:text-sm file:text-white">
                                <p class="text-xs text-themed-muted mt-1">ICO, PNG, or SVG. Max 512 KB.</p>
                            </div>
                        </div>

                        <button type="submit" class="btn-primary">Save branding</button>
                    </form>
                @endif
            </div>

        @elseif ($tab === 'notifications')
            <div class="glass-card p-5 sm:p-6">
                <h3 class="text-lg font-semibold mb-1 flex items-center gap-2">
                    <x-icon name="alerts" class="w-5 h-5 text-amber-400 animate-icon-pulse" />
                    Notifications
                </h3>
                <p class="text-sm text-themed-muted mb-6">Control which events generate dashboard alerts, and whether this company keeps SMS history.</p>

                <form method="POST" action="{{ route('settings.notifications') }}" class="space-y-5">
                    @csrf
                    @method('PUT')

                    @php $platformSaveOn = $platformSaveNotificationLogs ?? true; @endphp
                    @if (! $platformSaveOn)
                        <div class="flash-warning">
                            <x-icon name="alerts" class="w-5 h-5 shrink-0 text-amber-400 mt-0.5" />
                            <span>Platform saving is disabled by Super Admin. This company can only keep a live feed until the end of today.</span>
                        </div>
                    @endif
                    <label class="flex items-center justify-between gap-4 p-4 rounded-xl border border-themed bg-themed-subtle {{ $platformSaveOn ? 'cursor-pointer' : 'opacity-60' }}">
                        <span class="text-sm font-medium">
                            Save this company’s SMS and alerts
                            <span class="block text-xs font-normal text-themed-muted mt-1">When off, inbound SMS and alerts stay visible until the end of today, then are deleted. Changing this does not rewrite existing rows.</span>
                        </span>
                        @if ($platformSaveOn)
                            <input type="hidden" name="save_notification_logs" value="0">
                            <input type="checkbox" name="save_notification_logs" value="1" @checked(old('save_notification_logs', $settings['save_notification_logs'] ?? true))
                                   class="rounded border-themed text-teal-600 focus:ring-teal-500/30 h-5 w-5">
                        @else
                            <input type="checkbox" disabled class="rounded border-themed h-5 w-5">
                        @endif
                    </label>

                    <div class="space-y-3">
                        @foreach ([
                            'notify_otp_alerts' => 'OTP message alerts',
                            'notify_large_payment_alerts' => 'Large payment alerts',
                            'notify_sync_failure_alerts' => 'Sync failure alerts',
                            'notify_telegram_enabled' => 'Telegram alerts for critical events',
                            'notify_email_enabled' => 'Email alerts for critical events',
                            'notify_sms_alerts' => 'SMS alerts for critical events',
                            'notify_sound_enabled' => 'Play sound on new SMS (live feed)',
                            'notify_sound_announce_device' => 'Announce device name when a message arrives',
                            'message_poll_enabled' => 'Poll for new messages when live feed is open',
                            'allow_device_code_reuse' => 'Allow device name + code re-registration on the same device',
                        ] as $key => $label)
                            <label class="flex items-center justify-between gap-4 p-4 rounded-xl border border-themed bg-themed-subtle cursor-pointer">
                                <span class="text-sm font-medium">{{ $label }}</span>
                                <input type="checkbox" name="{{ $key }}" value="1" @checked(old($key, $settings[$key] ?? false))
                                       class="rounded border-themed text-teal-600 focus:ring-teal-500/30 h-5 w-5">
                            </label>
                        @endforeach
                    </div>

                    <div>
                        <label class="field-label" for="message_poll_interval_minutes">Message poll interval (minutes)</label>
                        <input id="message_poll_interval_minutes" type="number" name="message_poll_interval_minutes"
                               value="{{ old('message_poll_interval_minutes', $settings['message_poll_interval_minutes'] ?? 5) }}"
                               min="1" max="60" class="field-input max-w-xs">
                        <p class="text-xs text-themed-muted mt-1">How often the dashboard checks for new messages when polling is enabled.</p>
                    </div>

                    <div>
                        <label class="field-label" for="large_payment_threshold">Large payment threshold</label>
                        <input id="large_payment_threshold" type="number" name="large_payment_threshold"
                               value="{{ old('large_payment_threshold', $settings['large_payment_threshold']) }}"
                               min="1" class="field-input max-w-xs">
                    </div>

                    <div class="grid sm:grid-cols-2 gap-4 pt-2 border-t border-themed">
                        <div>
                            <label class="field-label" for="telegram_bot_token">Telegram bot token</label>
                            <input id="telegram_bot_token" type="text" name="telegram_bot_token"
                                   value="{{ old('telegram_bot_token', $settings['telegram_bot_token'] ?? '') }}"
                                   placeholder="123456:ABC..." class="field-input">
                        </div>
                        <div>
                            <label class="field-label" for="telegram_chat_id">Telegram chat ID</label>
                            <input id="telegram_chat_id" type="text" name="telegram_chat_id"
                                   value="{{ old('telegram_chat_id', $settings['telegram_chat_id'] ?? '') }}"
                                   placeholder="-1001234567890" class="field-input">
                        </div>
                        <div class="sm:col-span-2">
                            <label class="field-label" for="notify_email_recipients">Email recipients (comma-separated)</label>
                            <input id="notify_email_recipients" type="text" name="notify_email_recipients"
                                   value="{{ old('notify_email_recipients', $settings['notify_email_recipients'] ?? '') }}"
                                   placeholder="ops@company.com, admin@company.com" class="field-input">
                        </div>
                    </div>

                    <button type="submit" class="btn-primary">Save notifications</button>
                </form>

                @include('partials.log-deletion-request-form')
            </div>

        @elseif ($tab === 'sms')
            <div class="glass-card p-5 sm:p-6 space-y-8">
                <div>
                    <h3 class="text-lg font-semibold mb-1 flex items-center gap-2">
                        <x-icon name="messages" class="w-5 h-5 text-cyan-400" />
                        SMS Gateway
                    </h3>
                    <p class="text-sm text-themed-muted">Configure outbound SMS for alerts and test messages. Arkesel is supported.</p>
                </div>

                <form method="POST" action="{{ route('settings.sms') }}" class="space-y-5">
                    @csrf
                    @method('PUT')

                    <label class="flex items-center justify-between gap-4 p-4 rounded-xl border border-themed bg-themed-subtle cursor-pointer">
                        <span class="text-sm font-medium">Enable SMS gateway</span>
                        <input type="checkbox" name="sms_gateway_enabled" value="1" @checked(old('sms_gateway_enabled', $settings['sms_gateway_enabled'] ?? false))
                               class="rounded border-themed text-teal-600 focus:ring-teal-500/30 h-5 w-5">
                    </label>

                    <label class="flex items-center justify-between gap-4 p-4 rounded-xl border border-themed bg-themed-subtle cursor-pointer">
                        <span class="text-sm font-medium">Send critical alerts via SMS</span>
                        <input type="checkbox" name="notify_sms_alerts" value="1" @checked(old('notify_sms_alerts', $settings['notify_sms_alerts'] ?? false))
                               class="rounded border-themed text-teal-600 focus:ring-teal-500/30 h-5 w-5">
                    </label>

                    <div>
                        <label class="field-label" for="sms_provider">Provider</label>
                        <select id="sms_provider" name="sms_provider" class="field-select">
                            <option value="none" @selected(old('sms_provider', $settings['sms_provider'] ?? 'none') === 'none')>None</option>
                            <option value="arkesel" @selected(old('sms_provider', $settings['sms_provider'] ?? 'none') === 'arkesel')>Arkesel</option>
                        </select>
                    </div>

                    <div class="grid sm:grid-cols-2 gap-4">
                        <div>
                            <label class="field-label" for="sms_arkesel_api_key">Arkesel API key</label>
                            <input id="sms_arkesel_api_key" type="password" name="sms_arkesel_api_key" value="" autocomplete="new-password" class="field-input" placeholder="{{ !empty($settings['sms_arkesel_api_key_is_set']) ? '•••••••• (leave blank to keep)' : 'Enter API key' }}">
                        </div>
                        <div>
                            <label class="field-label" for="sms_arkesel_sender_id">Sender ID</label>
                            <input id="sms_arkesel_sender_id" type="text" name="sms_arkesel_sender_id"
                                   value="{{ old('sms_arkesel_sender_id', $settings['sms_arkesel_sender_id'] ?? '') }}"
                                   maxlength="20" class="field-input" placeholder="SenderID">
                        </div>
                    </div>

                    <div>
                        <label class="field-label" for="sms_default_recipients">Default recipients</label>
                        <input id="sms_default_recipients" type="text" name="sms_default_recipients"
                               value="{{ old('sms_default_recipients', $settings['sms_default_recipients'] ?? '') }}"
                               class="field-input" placeholder="233241234567, 233201112233">
                        <p class="text-xs text-themed-muted mt-1">Comma-separated phone numbers in international format.</p>
                    </div>

                    <button type="submit" class="btn-primary">Save SMS settings</button>
                </form>

                <form method="POST" action="{{ route('settings.sms.test') }}" class="space-y-4 border-t border-themed pt-6">
                    @csrf
                    <h4 class="font-semibold">Send test SMS</h4>
                    <div class="grid sm:grid-cols-2 gap-4">
                        <div>
                            <label class="field-label" for="test_recipient">Recipient</label>
                            <input id="test_recipient" type="text" name="test_recipient" required class="field-input" placeholder="233241234567">
                        </div>
                        <div>
                            <label class="field-label" for="test_message">Message</label>
                            <input id="test_message" type="text" name="test_message" maxlength="160" class="field-input" placeholder="Optional custom test message">
                        </div>
                    </div>
                    <button type="submit" class="btn-secondary">Send test SMS</button>
                </form>
            </div>

        @elseif ($tab === 'email')
            <div class="glass-card p-5 sm:p-6 space-y-8">
                <div>
                    <h3 class="text-lg font-semibold mb-1 flex items-center gap-2">
                        <x-icon name="mail" class="w-5 h-5 text-teal-600" />
                        Email Gateway
                    </h3>
                    <p class="text-sm text-themed-muted">Override SMTP settings used for alerts and verification emails. Leave disabled to use server `.env` mail config.</p>
                </div>

                <form method="POST" action="{{ route('settings.email') }}" class="space-y-5">
                    @csrf
                    @method('PUT')

                    <label class="flex items-center justify-between gap-4 p-4 rounded-xl border border-themed bg-themed-subtle cursor-pointer">
                        <span class="text-sm font-medium">Enable settings-based mail gateway</span>
                        <input type="checkbox" name="mail_gateway_enabled" value="1" @checked(old('mail_gateway_enabled', $settings['mail_gateway_enabled'] ?? false))
                               class="rounded border-themed text-teal-600 focus:ring-teal-500/30 h-5 w-5">
                    </label>

                    <div>
                        <label class="field-label" for="mail_mailer">Mailer</label>
                        <select id="mail_mailer" name="mail_mailer" class="field-select">
                            <option value="smtp" @selected(old('mail_mailer', $settings['mail_mailer'] ?? 'smtp') === 'smtp')>SMTP</option>
                            <option value="log" @selected(old('mail_mailer', $settings['mail_mailer'] ?? 'smtp') === 'log')>Log (dev)</option>
                        </select>
                    </div>

                    <div class="grid sm:grid-cols-2 gap-4">
                        <div>
                            <label class="field-label" for="mail_host">SMTP host</label>
                            <input id="mail_host" type="text" name="mail_host" value="{{ old('mail_host', $settings['mail_host'] ?? '') }}" class="field-input" placeholder="smtp.mailgun.org">
                        </div>
                        <div>
                            <label class="field-label" for="mail_port">Port</label>
                            <input id="mail_port" type="number" name="mail_port" value="{{ old('mail_port', $settings['mail_port'] ?? 587) }}" class="field-input">
                        </div>
                        <div>
                            <label class="field-label" for="mail_username">Username</label>
                            <input id="mail_username" type="text" name="mail_username" value="{{ old('mail_username', $settings['mail_username'] ?? '') }}" class="field-input">
                        </div>
                        <div>
                            <label class="field-label" for="mail_password">Password</label>
                            <input id="mail_password" type="password" name="mail_password" value="" autocomplete="new-password" class="field-input" placeholder="{{ !empty($settings['mail_password_is_set']) ? '•••••••• (leave blank to keep)' : 'SMTP password' }}">
                        </div>
                        <div>
                            <label class="field-label" for="mail_encryption">Encryption</label>
                            <select id="mail_encryption" name="mail_encryption" class="field-select">
                                @foreach (['tls' => 'TLS', 'ssl' => 'SSL', 'null' => 'None'] as $value => $label)
                                    <option value="{{ $value }}" @selected(old('mail_encryption', $settings['mail_encryption'] ?? 'tls') === $value)>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="field-label" for="mail_from_address">From address</label>
                            <input id="mail_from_address" type="email" name="mail_from_address" value="{{ old('mail_from_address', $settings['mail_from_address'] ?? '') }}" class="field-input">
                        </div>
                    </div>

                    <div>
                        <label class="field-label" for="mail_from_name">From name</label>
                        <input id="mail_from_name" type="text" name="mail_from_name" value="{{ old('mail_from_name', $settings['mail_from_name'] ?? '') }}" class="field-input">
                    </div>

                    <button type="submit" class="btn-primary">Save email settings</button>
                </form>

                <form method="POST" action="{{ route('settings.email.test') }}" class="space-y-4 border-t border-themed pt-6">
                    @csrf
                    <h4 class="font-semibold">Send test email</h4>
                    <div>
                        <label class="field-label" for="test_email">Recipient email</label>
                        <input id="test_email" type="email" name="test_email" required class="field-input" placeholder="you@company.com">
                    </div>
                    <button type="submit" class="btn-secondary">Send test email</button>
                </form>
            </div>

        @elseif ($tab === 'payments')
            <div class="glass-card p-5 sm:p-6">
                <h3 class="text-lg font-semibold mb-1 flex items-center gap-2">
                    <x-icon name="bolt" class="w-5 h-5 text-emerald-400" />
                    Payment Gateway
                </h3>

                @if (!empty($canManagePayments))
                    <p class="text-sm text-themed-muted mb-6">Enable any combination of payment methods for company registration and trial conversion. Credentials are stored at platform level.</p>

                    <form method="POST" action="{{ route('settings.payments') }}" class="space-y-5" x-data="{ enabled: {{ \Illuminate\Support\Js::from(array_values($enabledPaymentProviders ?? [])) }} }">
                        @csrf
                        @method('PUT')

                        <label class="flex items-center justify-between gap-4 p-4 rounded-xl border border-themed bg-themed-subtle cursor-pointer">
                            <span class="text-sm font-medium">Enable payment checkout</span>
                            <input type="checkbox" name="payment_gateway_enabled" value="1" @checked(old('payment_gateway_enabled', $settings['payment_gateway_enabled'] ?? false))
                                   class="rounded border-themed text-teal-600 focus:ring-teal-500/30 h-5 w-5">
                        </label>

                        <div>
                            <label class="field-label">Payment gateways</label>
                            <p class="text-xs text-themed-muted mb-2">Turn on any combination. Payers choose among the enabled methods. Auto-renew with a saved card remains Paystack-only (Paystack must stay enabled).</p>
                            <input type="hidden" name="payment_providers_mode" value="1">
                            <div class="grid sm:grid-cols-2 gap-2">
                                @foreach (($paymentGatewayLabels ?? \App\Services\Payments\PaymentGatewayManager::labels()) as $id => $label)
                                    <label class="flex items-center gap-2 p-3 rounded-xl border border-themed bg-themed-subtle cursor-pointer">
                                        <input type="checkbox" name="payment_providers[]" value="{{ $id }}" class="rounded border-themed" x-model="enabled">
                                        <span class="text-sm">{{ $label }}</span>
                                    </label>
                                @endforeach
                            </div>
                        </div>

                        <div class="rounded-xl border border-themed p-4 space-y-3 bg-themed-subtle/40">
                            <p class="text-sm text-themed-muted">
                                Trial conversion and renewals use the platform subscription price
                                (<strong class="text-themed">{{ app(\App\Services\SubscriptionService::class)->formatSubscriptionPrice() }}</strong>/mo)
                                with prepaid discounts on 3–12 month terms.
                                Fields below are legacy offline/pending registration only.
                            </p>
                            <div class="grid sm:grid-cols-2 gap-4">
                                <div>
                                    <label class="field-label" for="payment_currency">Legacy currency (offline / pending)</label>
                                    <input id="payment_currency" type="text" name="payment_currency" maxlength="3"
                                           value="{{ old('payment_currency', $settings['payment_currency'] ?? 'GHS') }}" class="field-input uppercase">
                                </div>
                                <div>
                                    <label class="field-label" for="payment_registration_amount">Legacy registration amount</label>
                                    <input id="payment_registration_amount" type="number" step="0.01" min="1" name="payment_registration_amount"
                                           value="{{ old('payment_registration_amount', $settings['payment_registration_amount'] ?? 100) }}" class="field-input">
                                </div>
                            </div>
                        </div>

                        <div class="space-y-4 border border-themed rounded-xl p-4" x-show="enabled.includes('paystack')" x-cloak>
                            <h4 class="font-medium">Paystack</h4>
                            <div>
                                <label class="field-label">Public key</label>
                                <input type="text" name="paystack_public_key" value="{{ old('paystack_public_key', $settings['paystack_public_key'] ?? '') }}" class="field-input">
                            </div>
                            <div>
                                <label class="field-label">Secret key</label>
                                <input type="password" name="paystack_secret_key" value="" autocomplete="new-password" class="field-input" placeholder="{{ !empty($settings['paystack_secret_key_is_set']) ? '•••••••• (leave blank to keep)' : 'sk_live_...' }}">
                            </div>
                            <div>
                                <label class="field-label">Webhook secret</label>
                                <input type="password" name="paystack_webhook_secret" value="" autocomplete="new-password" class="field-input" placeholder="{{ !empty($settings['paystack_webhook_secret_is_set']) ? '•••••••• (leave blank to keep)' : 'Optional (defaults to secret key)' }}">
                            </div>
                            <p class="text-xs text-themed-muted">Webhook URL: <code class="text-themed">{{ $paystackWebhookUrl }}</code></p>
                        </div>

                        <div class="space-y-4 border border-themed rounded-xl p-4" x-show="enabled.includes('hubtel')" x-cloak>
                            <h4 class="font-medium">Hubtel</h4>
                            <div>
                                <label class="field-label">Client ID</label>
                                <input type="text" name="hubtel_client_id" value="{{ old('hubtel_client_id', $settings['hubtel_client_id'] ?? '') }}" class="field-input">
                            </div>
                            <div>
                                <label class="field-label">Client secret</label>
                                <input type="password" name="hubtel_client_secret" value="" autocomplete="new-password" class="field-input" placeholder="{{ !empty($settings['hubtel_client_secret_is_set']) ? '•••••••• (leave blank to keep)' : 'Client secret' }}">
                            </div>
                            <div>
                                <label class="field-label">Merchant account number</label>
                                <input type="text" name="hubtel_merchant_account_number" value="{{ old('hubtel_merchant_account_number', $settings['hubtel_merchant_account_number'] ?? '') }}" class="field-input">
                            </div>
                            <div>
                                <label class="field-label">Webhook secret</label>
                                <input type="password" name="hubtel_webhook_secret" value="" autocomplete="new-password" class="field-input" placeholder="{{ !empty($settings['hubtel_webhook_secret_is_set']) ? '•••••••• (leave blank to keep)' : 'Optional shared secret' }}">
                            </div>
                            <p class="text-xs text-themed-muted">Webhook URL: <code class="text-themed">{{ $hubtelWebhookUrl }}</code></p>
                        </div>

                        <div class="space-y-4 border border-themed rounded-xl p-4" x-show="enabled.includes('stripe')" x-cloak>
                            <h4 class="font-medium">Stripe</h4>
                            <div>
                                <label class="field-label">Publishable key</label>
                                <input type="text" name="stripe_publishable_key" value="{{ old('stripe_publishable_key', $settings['stripe_publishable_key'] ?? '') }}" class="field-input">
                            </div>
                            <div>
                                <label class="field-label">Secret key</label>
                                <input type="password" name="stripe_secret_key" value="" autocomplete="new-password" class="field-input" placeholder="{{ !empty($settings['stripe_secret_key_is_set']) ? '•••••••• (leave blank to keep)' : 'sk_live_...' }}">
                            </div>
                            <div>
                                <label class="field-label">Webhook secret</label>
                                <input type="password" name="stripe_webhook_secret" value="" autocomplete="new-password" class="field-input" placeholder="{{ !empty($settings['stripe_webhook_secret_is_set']) ? '•••••••• (leave blank to keep)' : 'whsec_...' }}">
                            </div>
                            <p class="text-xs text-themed-muted">Webhook URL: <code class="text-themed">{{ $stripeWebhookUrl }}</code></p>
                        </div>

                        <div class="space-y-4 border border-themed rounded-xl p-4" x-show="enabled.includes('paypal')" x-cloak>
                            <h4 class="font-medium">PayPal</h4>
                            <div>
                                <label class="field-label">Client ID</label>
                                <input type="text" name="paypal_client_id" value="{{ old('paypal_client_id', $settings['paypal_client_id'] ?? '') }}" class="field-input">
                            </div>
                            <div>
                                <label class="field-label">Client secret</label>
                                <input type="password" name="paypal_client_secret" value="" autocomplete="new-password" class="field-input" placeholder="{{ !empty($settings['paypal_client_secret_is_set']) ? '•••••••• (leave blank to keep)' : 'Client secret' }}">
                            </div>
                            <div>
                                <label class="field-label">Webhook ID</label>
                                <input type="text" name="paypal_webhook_id" value="{{ old('paypal_webhook_id', $settings['paypal_webhook_id'] ?? '') }}" class="field-input" placeholder="Optional — verifies webhook signatures">
                            </div>
                            <div>
                                <label class="field-label">Mode</label>
                                <select name="paypal_mode" class="field-select">
                                    <option value="sandbox" @selected(old('paypal_mode', $settings['paypal_mode'] ?? 'sandbox') === 'sandbox')>Sandbox</option>
                                    <option value="live" @selected(old('paypal_mode', $settings['paypal_mode'] ?? 'sandbox') === 'live')>Live</option>
                                </select>
                            </div>
                            <p class="text-xs text-themed-muted">Webhook URL: <code class="text-themed">{{ $paypalWebhookUrl }}</code></p>
                        </div>

                        <div class="space-y-4 border border-themed rounded-xl p-4" x-show="enabled.includes('offline')" x-cloak>
                            <h4 class="font-medium">Offline MoMo</h4>
                            <div>
                                <label class="field-label">Network</label>
                                <input type="text" name="offline_momo_network" value="{{ old('offline_momo_network', $settings['offline_momo_network'] ?? '') }}" class="field-input" placeholder="MTN, Telecel, AirtelTigo">
                            </div>
                            <div>
                                <label class="field-label">Receiving number</label>
                                <input type="text" name="offline_momo_number" value="{{ old('offline_momo_number', $settings['offline_momo_number'] ?? '') }}" class="field-input">
                            </div>
                            <div>
                                <label class="field-label">Account name</label>
                                <input type="text" name="offline_momo_account_name" value="{{ old('offline_momo_account_name', $settings['offline_momo_account_name'] ?? '') }}" class="field-input">
                            </div>
                            <div>
                                <label class="field-label">Payer instructions</label>
                                <textarea name="offline_momo_instructions" rows="3" class="field-input">{{ old('offline_momo_instructions', $settings['offline_momo_instructions'] ?? '') }}</textarea>
                            </div>
                        </div>

                        <div class="space-y-4 border border-themed rounded-xl p-4" x-show="enabled.includes('bank')" x-cloak>
                            <h4 class="font-medium">Bank transfer</h4>
                            <div>
                                <label class="field-label">Bank name</label>
                                <input type="text" name="bank_name" value="{{ old('bank_name', $settings['bank_name'] ?? '') }}" class="field-input">
                            </div>
                            <div>
                                <label class="field-label">Account name</label>
                                <input type="text" name="bank_account_name" value="{{ old('bank_account_name', $settings['bank_account_name'] ?? '') }}" class="field-input">
                            </div>
                            <div>
                                <label class="field-label">Account number</label>
                                <input type="text" name="bank_account_number" value="{{ old('bank_account_number', $settings['bank_account_number'] ?? '') }}" class="field-input">
                            </div>
                            <div>
                                <label class="field-label">Branch</label>
                                <input type="text" name="bank_branch" value="{{ old('bank_branch', $settings['bank_branch'] ?? '') }}" class="field-input" placeholder="Optional">
                            </div>
                            <div>
                                <label class="field-label">SWIFT / sort code</label>
                                <input type="text" name="bank_swift" value="{{ old('bank_swift', $settings['bank_swift'] ?? '') }}" class="field-input" placeholder="Optional">
                            </div>
                            <div>
                                <label class="field-label">Payer instructions</label>
                                <textarea name="bank_instructions" rows="3" class="field-input">{{ old('bank_instructions', $settings['bank_instructions'] ?? '') }}</textarea>
                            </div>
                        </div>

                        <button type="submit" class="btn-primary">Save payment settings</button>
                    </form>
                @else
                    <p class="text-sm text-themed-muted mb-2">Payment methods are enabled by the platform Super Admin.</p>
                    @if (!empty($availablePaymentGateways))
                        <p class="text-sm text-themed-muted">Currently available: {{ collect($availablePaymentGateways)->pluck('label')->join(', ') }}.</p>
                    @else
                        <p class="text-sm text-themed-muted">No payment methods are available right now.</p>
                    @endif
                    <p class="text-sm text-themed-muted mt-2">Gateway credentials and webhook secrets are not available to company admins.</p>
                @endif
            </div>

        @elseif ($tab === 'integrations')
            <div class="glass-card p-5 sm:p-6">
                <h3 class="text-lg font-semibold mb-1 flex items-center gap-2">
                    <x-icon name="bolt" class="w-5 h-5 text-cyan-400 animate-icon-pulse" />
                    Integrations
                </h3>
                <p class="text-sm text-themed-muted mb-6">Outbound webhooks and device request signing.</p>

                <form method="POST" action="{{ route('settings.integrations') }}" class="space-y-5">
                    @csrf
                    @method('PUT')

                    <label class="flex items-center justify-between gap-4 p-4 rounded-xl border border-themed bg-themed-subtle cursor-pointer">
                        <span class="text-sm font-medium">Enable outbound webhooks</span>
                        <input type="checkbox" name="webhook_enabled" value="1" @checked(old('webhook_enabled', $settings['webhook_enabled'] ?? false))
                               class="rounded border-themed text-teal-600 focus:ring-teal-500/30 h-5 w-5">
                    </label>

                    <div>
                        <label class="field-label" for="webhook_url">Webhook URL</label>
                        <input id="webhook_url" type="url" name="webhook_url"
                               value="{{ old('webhook_url', $settings['webhook_url'] ?? '') }}"
                               placeholder="https://example.com/notifyhub/webhook" class="field-input">
                    </div>

                    <div>
                        <label class="field-label" for="webhook_secret">Webhook signing secret (optional)</label>
                        <input id="webhook_secret" type="text" name="webhook_secret"
                               value="{{ old('webhook_secret', $settings['webhook_secret'] ?? '') }}"
                               class="field-input">
                    </div>

                    <div>
                        <label class="field-label" for="webhook_events">Events (comma-separated)</label>
                        <input id="webhook_events" type="text" name="webhook_events"
                               value="{{ old('webhook_events', is_array($settings['webhook_events'] ?? null) ? implode(', ', $settings['webhook_events']) : 'message.received, alert.created') }}"
                               class="field-input">
                    </div>

                    <label class="flex items-center justify-between gap-4 p-4 rounded-xl border border-themed bg-themed-subtle cursor-pointer">
                        <div>
                            <span class="text-sm font-medium block">Require HMAC signatures from devices</span>
                            <span class="text-xs text-themed-muted">Devices must send X-NotifyHub-Signature on ingest requests</span>
                        </div>
                        <input type="checkbox" name="require_device_hmac" value="1" @checked(old('require_device_hmac', $settings['require_device_hmac'] ?? false))
                               class="rounded border-themed text-teal-600 focus:ring-teal-500/30 h-5 w-5">
                    </label>

                    <button type="submit" class="btn-primary">Save integrations</button>
                </form>
            </div>

        @elseif ($tab === 'sounds')
            <div class="space-y-6">
                <div class="glass-card p-5 sm:p-6">
                    <h3 class="text-lg font-semibold mb-1 flex items-center gap-2">
                        <x-icon name="signal" class="w-5 h-5 text-cyan-400 animate-icon-pulse" />
                        Notification Sounds
                    </h3>
                    <p class="text-sm text-themed-muted mb-6">Upload custom sounds, set the active alert, preview, rename, or delete.</p>

                    <form method="POST" action="{{ route('settings.sounds.store') }}" enctype="multipart/form-data" class="space-y-4 p-4 rounded-xl border border-themed bg-themed-subtle mb-6">
                        @csrf
                        <div class="grid sm:grid-cols-2 gap-4">
                            <div>
                                <label class="field-label" for="sound_name">Sound name</label>
                                <input id="sound_name" type="text" name="name" required placeholder="e.g. Payment alert" class="field-input">
                            </div>
                            <div>
                                <label class="field-label" for="sound_file">Audio file</label>
                                <input id="sound_file" type="file" name="sound" accept=".mp3,.wav,.ogg,.m4a,audio/*" required
                                       class="field-input file:mr-3 file:rounded-lg file:border-0 file:bg-teal-700 file:px-3 file:py-1.5 file:text-sm file:text-white">
                            </div>
                        </div>
                        <p class="text-xs text-themed-muted">MP3, WAV, OGG, or M4A — max 5 MB.</p>
                        <button type="submit" class="btn-primary btn-sm">
                            <x-icon name="plus" class="w-4 h-4" />
                            Upload sound
                        </button>
                    </form>

                    <div class="space-y-3">
                        @foreach ($sounds as $sound)
                            <div class="p-4 rounded-xl border {{ $sound->is_active ? 'border-teal-600/40 bg-teal-600/5 ring-1 ring-teal-500/20' : 'border-themed bg-themed-subtle' }}">
                                <div class="flex flex-col lg:flex-row lg:items-start gap-4">
                                    <div class="flex-1 min-w-0">
                                        <div class="flex items-center gap-2 flex-wrap">
                                            <p class="font-medium">{{ $sound->name }}</p>
                                            @if ($sound->is_active)
                                                <span class="badge-info">Active</span>
                                            @endif
                                            @if ($sound->is_builtin)
                                                <span class="badge-neutral">Built-in</span>
                                            @endif
                                        </div>
                                        <p class="text-xs text-themed-muted mt-1">
                                            @if ($sound->is_builtin)
                                                Synthetic two-tone chime (no file)
                                            @elseif ($sound->fileSize())
                                                {{ number_format($sound->fileSize() / 1024, 1) }} KB
                                            @else
                                                File missing
                                            @endif
                                        </p>
                                    </div>
                                    <div class="flex flex-wrap gap-2 shrink-0">
                                        <button type="button"
                                                onclick="window.notifyhubPreviewSound(@js($sound->url()))"
                                                class="btn-secondary btn-sm">Preview</button>
                                        @if (! $sound->is_active)
                                            <form method="POST" action="{{ route('settings.sounds.activate', $sound) }}">
                                                @csrf @method('PATCH')
                                                <button type="submit" class="btn-primary btn-sm">Set active</button>
                                            </form>
                                        @endif
                                    </div>
                                </div>

                                @if (! $sound->is_builtin)
                                    <div class="mt-4 pt-4 border-t border-themed flex flex-col sm:flex-row gap-3 sm:items-end">
                                        <form method="POST" action="{{ route('settings.sounds.update', $sound) }}" enctype="multipart/form-data"
                                              class="flex-1 grid sm:grid-cols-2 gap-3 items-end">
                                            @csrf @method('PUT')
                                            <div>
                                                <label class="field-label text-xs">Rename</label>
                                                <input type="text" name="name" value="{{ $sound->name }}" required class="field-input">
                                            </div>
                                            <div>
                                                <label class="field-label text-xs">Replace file</label>
                                                <input type="file" name="sound" accept=".mp3,.wav,.ogg,.m4a,audio/*"
                                                       class="field-input file:mr-2 file:rounded file:border-0 file:bg-teal-700 file:px-2 file:py-1 file:text-xs file:text-white">
                                            </div>
                                            <div class="sm:col-span-2">
                                                <button type="submit" class="btn-secondary btn-sm">Save changes</button>
                                            </div>
                                        </form>
                                        <form method="POST" action="{{ route('settings.sounds.destroy', $sound) }}" onsubmit="return confirm('Delete this sound?')">
                                            @csrf @method('DELETE')
                                            <button type="submit" class="btn-danger btn-sm">
                                                <x-icon name="trash" class="w-4 h-4" />
                                                Delete
                                            </button>
                                        </form>
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

        @elseif ($tab === 'departments')
            <div class="glass-card p-5 sm:p-6">
                <h3 class="text-lg font-semibold mb-1 flex items-center gap-2">
                    <x-icon name="users" class="w-5 h-5 text-teal-600 animate-icon-pulse" />
                    Departments
                </h3>
                <p class="text-sm text-themed-muted mb-6">Create departments, assign devices to them, and assign users so they only see their department's messages on the dashboard.</p>

                <form method="POST" action="{{ route('settings.departments.store') }}" class="flex flex-col sm:flex-row gap-3 mb-6 p-4 rounded-xl border border-themed bg-themed-subtle">
                    @csrf
                    <input type="text" name="name" required placeholder="Department name, e.g. Finance" class="field-input flex-1">
                    <button type="submit" class="btn-primary shrink-0">
                        <x-icon name="plus" class="w-4 h-4" />
                        Add department
                    </button>
                </form>

                @if ($departments->isEmpty())
                    <p class="text-themed-muted text-sm text-center py-8">No departments yet. Create one above, then assign it when adding or editing users.</p>
                @else
                    <div class="space-y-3">
                        @foreach ($departments as $department)
                            <div class="p-4 rounded-xl border border-themed bg-themed-subtle">
                                <div class="flex flex-col sm:flex-row sm:items-center gap-3 justify-between">
                                    <div>
                                        <p class="font-medium">{{ $department->name }}</p>
                                        <p class="text-xs text-themed-muted mt-0.5">{{ $department->users_count }} {{ Str::plural('user', $department->users_count) }} · {{ $department->devices_count }} {{ Str::plural('device', $department->devices_count) }}</p>
                                    </div>
                                    <form method="POST" action="{{ route('settings.departments.destroy', $department) }}" onsubmit="return confirm('Delete this department? Users will be unassigned.')">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn-danger btn-sm">
                                            <x-icon name="trash" class="w-4 h-4" />
                                            Delete
                                        </button>
                                    </form>
                                </div>
                                <form method="POST" action="{{ route('settings.departments.update', $department) }}" class="mt-3 pt-3 border-t border-themed flex flex-col sm:flex-row gap-3 items-stretch sm:items-end">
                                    @csrf @method('PUT')
                                    <div class="flex-1">
                                        <label class="field-label text-xs">Rename</label>
                                        <input type="text" name="name" value="{{ $department->name }}" required class="field-input">
                                    </div>
                                    <button type="submit" class="btn-secondary btn-sm">Save</button>
                                </form>
                                <form method="POST" action="{{ route('settings.departments.devices', $department) }}" class="mt-3 pt-3 border-t border-themed">
                                    @csrf @method('PUT')
                                    <label class="field-label text-xs mb-2">Assigned devices</label>
                                    @if ($allDevices->isEmpty())
                                        <p class="text-xs text-themed-muted">No devices registered yet.</p>
                                    @else
                                        <div class="grid sm:grid-cols-2 gap-2 max-h-40 overflow-y-auto mb-3">
                                            @foreach ($allDevices as $device)
                                                <label class="flex items-center gap-2 text-sm">
                                                    <input type="checkbox" name="device_ids[]" value="{{ $device->id }}" @checked($device->department_id === $department->id)>
                                                    <span>{{ $device->device_name }} <span class="text-themed-muted">({{ $device->device_uid }})</span></span>
                                                </label>
                                            @endforeach
                                        </div>
                                        <button type="submit" class="btn-primary btn-sm">
                                            <x-icon name="devices" class="w-4 h-4" />
                                            Save device assignment
                                        </button>
                                    @endif
                                </form>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>

        @elseif ($tab === 'roles')
            <div class="glass-card p-5 sm:p-6">
                <h3 class="text-lg font-semibold mb-1 flex items-center gap-2">
                    <x-icon name="shield" class="w-5 h-5 text-teal-600 animate-icon-pulse" />
                    Role Management
                </h3>
                <p class="text-sm text-themed-muted mb-6">Create roles and control which pages they can access and which actions they can perform. Assign roles when adding or editing users.</p>

                @if (auth()->user()->hasAction('roles.manage'))
                    <form method="POST" action="{{ route('settings.roles.store') }}" class="mb-8 p-4 rounded-xl border border-themed bg-themed-subtle space-y-4">
                        @csrf
                        <p class="font-medium text-sm">Create new role</p>
                        <div class="grid sm:grid-cols-2 gap-4">
                            <div>
                                <label class="field-label text-xs">Role name</label>
                                <input type="text" name="name" required placeholder="e.g. Support Agent" class="field-input">
                            </div>
                            <div>
                                <label class="field-label text-xs">Description</label>
                                <input type="text" name="description" placeholder="Optional description" class="field-input">
                            </div>
                        </div>

                        @include('settings.partials.role-permissions', [
                            'permissionPages' => $permissionPages,
                            'permissionActions' => $permissionActions,
                            'selectedPages' => old('pages', []),
                            'selectedActions' => old('actions', []),
                            'inputPrefix' => 'create',
                        ])

                        <button type="submit" class="btn-primary btn-sm">
                            <x-icon name="plus" class="w-4 h-4" />
                            Add role
                        </button>
                    </form>
                @endif

                @if ($roles->isEmpty())
                    <p class="text-themed-muted text-sm text-center py-8">No roles yet.</p>
                @else
                    <div class="space-y-4">
                        @foreach ($roles as $role)
                            @php
                                $rolePages = $role->permissions['pages'] ?? [];
                                $roleActions = $role->permissions['actions'] ?? [];
                            @endphp
                            <div class="p-4 rounded-xl border border-themed bg-themed-subtle">
                                <div class="flex flex-col sm:flex-row sm:items-start gap-3 justify-between mb-4">
                                    <div>
                                        <div class="flex items-center gap-2 flex-wrap">
                                            <p class="font-medium">{{ $role->name }}</p>
                                            @if ($role->is_system)
                                                <span class="badge-neutral">System</span>
                                            @endif
                                        </div>
                                        @if ($role->description)
                                            <p class="text-xs text-themed-muted mt-1">{{ $role->description }}</p>
                                        @endif
                                        <p class="text-xs text-themed-muted mt-1">{{ $role->users_count }} {{ Str::plural('user', $role->users_count) }} · {{ count($rolePages) }} pages · {{ count($roleActions) }} actions</p>
                                    </div>
                                    @if (auth()->user()->hasAction('roles.manage') && ! $role->is_system && $role->users_count === 0)
                                        <form method="POST" action="{{ route('settings.roles.destroy', $role) }}" onsubmit="return confirm('Delete this role?')">
                                            @csrf @method('DELETE')
                                            <button type="submit" class="btn-danger btn-sm">
                                                <x-icon name="trash" class="w-4 h-4" />
                                                Delete
                                            </button>
                                        </form>
                                    @endif
                                </div>

                                @if (auth()->user()->hasAction('roles.manage'))
                                    <form method="POST" action="{{ route('settings.roles.update', $role) }}" class="pt-4 border-t border-themed space-y-4">
                                        @csrf @method('PUT')
                                        <div class="grid sm:grid-cols-2 gap-4">
                                            <div>
                                                <label class="field-label text-xs">Role name</label>
                                                <input type="text" name="name" value="{{ $role->name }}" required class="field-input">
                                            </div>
                                            <div>
                                                <label class="field-label text-xs">Description</label>
                                                <input type="text" name="description" value="{{ $role->description }}" class="field-input">
                                            </div>
                                        </div>

                                        @include('settings.partials.role-permissions', [
                                            'permissionPages' => $permissionPages,
                                            'permissionActions' => $permissionActions,
                                            'selectedPages' => $rolePages,
                                            'selectedActions' => $roleActions,
                                            'inputPrefix' => 'role-'.$role->id,
                                        ])

                                        <button type="submit" class="btn-secondary btn-sm">Save role</button>
                                    </form>
                                @else
                                    <div class="pt-4 border-t border-themed grid sm:grid-cols-2 gap-4 text-sm">
                                        <div>
                                            <p class="field-label text-xs mb-2">Pages</p>
                                            <ul class="space-y-1 text-themed-muted">
                                                @foreach ($permissionPages as $key => $label)
                                                    @if (in_array($key, $rolePages, true))
                                                        <li>{{ $label }}</li>
                                                    @endif
                                                @endforeach
                                            </ul>
                                        </div>
                                        <div>
                                            <p class="field-label text-xs mb-2">Actions</p>
                                            <ul class="space-y-1 text-themed-muted">
                                                @foreach ($permissionActions as $key => $meta)
                                                    @if (in_array($key, $roleActions, true))
                                                        <li>{{ $meta['label'] }}</li>
                                                    @endif
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>

        @elseif ($tab === 'backup')
            <div class="glass-card p-5 sm:p-6">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
                    <div>
                        <h3 class="text-lg font-semibold flex items-center gap-2">
                            <x-icon name="database" class="w-5 h-5 text-cyan-400" />
                            Database Backup
                        </h3>
                        <p class="text-sm text-themed-muted mt-1">Create and download SQL backups of your {{ $appName }} data.</p>
                    </div>
                    <form method="POST" action="{{ route('settings.backup.create') }}">
                        @csrf
                        <button type="submit" class="btn-primary btn-sm">
                            <x-icon name="plus" class="w-4 h-4" />
                            Create backup
                        </button>
                    </form>
                </div>

                @if (count($backups) === 0)
                    <p class="text-themed-muted text-sm text-center py-8">No backups yet. Create your first backup above.</p>
                @else
                    <div class="space-y-2">
                        @foreach ($backups as $backup)
                            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 p-4 rounded-xl border border-themed bg-themed-subtle">
                                <div class="min-w-0">
                                    <p class="font-mono text-sm truncate">{{ $backup['name'] }}</p>
                                    <p class="text-xs text-themed-muted mt-0.5">
                                        {{ number_format($backup['size'] / 1024, 1) }} KB · {{ date('M d, Y H:i', $backup['created_at']) }}
                                    </p>
                                </div>
                                <div class="flex gap-2 shrink-0">
                                    <a href="{{ route('settings.backup.download', $backup['name']) }}" class="btn-secondary btn-sm">
                                        <x-icon name="download" class="w-4 h-4" />
                                        Download
                                    </a>
                                    <form method="POST" action="{{ route('settings.backup.delete', $backup['name']) }}" onsubmit="return confirm('Delete this backup?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn-danger btn-sm">
                                            <x-icon name="trash" class="w-4 h-4" />
                                        </button>
                                    </form>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>

        @elseif ($tab === 'audit')
            <div class="glass-card p-5 sm:p-6">
                <h3 class="text-lg font-semibold mb-1 flex items-center gap-2">
                    <x-icon name="clipboard" class="w-5 h-5 text-teal-600" />
                    Audit Log
                </h3>
                <p class="text-sm text-themed-muted mb-6">Recent administrative actions and system changes.</p>

                <div class="table-wrap !shadow-none !border-0">
                    <div class="overflow-x-auto md:overflow-visible">
                        <table class="data-table responsive-table">
                            <thead>
                                <tr>
                                    <th>Time</th>
                                    <th>User</th>
                                    <th>Action</th>
                                    <th>Category</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($auditLogs as $log)
                                    <tr>
                                        <td data-label="Time" class="whitespace-nowrap text-xs">{{ $log->created_at->format('M d, H:i') }}</td>
                                        <td data-label="User">{{ $log->user?->name ?? 'System' }}</td>
                                        <td data-label="Action"><span class="{{ $log->actionColor() }} capitalize">{{ $log->action }}</span></td>
                                        <td data-label="Category"><span class="badge-neutral capitalize">{{ $log->category }}</span></td>
                                        <td data-label="Description" class="text-themed-muted text-sm">{{ $log->description }}</td>
                                    </tr>
                                @empty
                                    <tr><td colspan="5" class="!block text-center py-8 text-themed-muted">No audit entries yet.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        @elseif ($tab === 'theme')
            <div class="glass-card p-5 sm:p-6">
                <h3 class="text-lg font-semibold mb-1 flex items-center gap-2">
                    <x-icon name="sun" class="w-5 h-5 text-amber-400 animate-icon-spin-slow" />
                    Theme
                </h3>
                <p class="text-sm text-themed-muted mb-6">Set the default appearance for all users. Users can override with the theme toggle.</p>

                <form method="POST" action="{{ route('settings.theme') }}" class="space-y-5">
                    @csrf
                    @method('PUT')

                    <div class="grid sm:grid-cols-3 gap-3">
                        @foreach (['dark' => ['Dark', 'moon'], 'light' => ['Light', 'sun'], 'system' => ['System', 'devices']] as $value => [$label, $icon])
                            <label class="relative cursor-pointer">
                                <input type="radio" name="default_theme" value="{{ $value }}" class="peer sr-only"
                                       @checked(old('default_theme', $settings['default_theme']) === $value)>
                                <div class="p-4 rounded-xl border border-themed bg-themed-subtle text-center transition-all peer-checked:border-teal-600 peer-checked:ring-2 peer-checked:ring-teal-500/30 peer-checked:bg-teal-600/5">
                                    <x-icon :name="$icon" class="w-6 h-6 mx-auto mb-2 text-teal-600" />
                                    <span class="text-sm font-medium">{{ $label }}</span>
                                </div>
                            </label>
                        @endforeach
                    </div>

                    <div x-data="themeToggle()" x-init="init()" class="p-4 rounded-xl border border-themed bg-themed-subtle">
                        <p class="text-sm font-medium mb-3">Preview — your personal preference</p>
                        <button type="button" @click="toggle()" class="btn-secondary btn-sm">
                            <x-icon name="sun" class="w-4 h-4" x-show="!isLight" x-cloak />
                            <x-icon name="moon" class="w-4 h-4" x-show="isLight" x-cloak />
                            Toggle now
                        </button>
                    </div>

                    <button type="submit" class="btn-primary">Save theme default</button>
                </form>
            </div>

        @elseif ($tab === 'security')
            <div class="glass-card p-5 sm:p-6">
                <h3 class="text-lg font-semibold mb-1 flex items-center gap-2">
                    <x-icon name="shield" class="w-5 h-5 text-emerald-400 animate-icon-pulse" />
                    Security
                </h3>
                <p class="text-sm text-themed-muted mb-6">Protect logins, two-factor authentication, and device/API hardening.</p>

                <form method="POST" action="{{ route('settings.security') }}" class="space-y-5">
                    @csrf
                    @method('PUT')

                    <div>
                        <label class="field-label" for="two_factor_policy">Two-factor authentication policy</label>
                        <select id="two_factor_policy" name="two_factor_policy" class="field-select max-w-md">
                            <option value="disabled" @selected(old('two_factor_policy', $settings['two_factor_policy'] ?? 'optional') === 'disabled')>Disabled for all users</option>
                            <option value="optional" @selected(old('two_factor_policy', $settings['two_factor_policy'] ?? 'optional') === 'optional')>Optional — users choose</option>
                            <option value="required" @selected(old('two_factor_policy', $settings['two_factor_policy'] ?? 'optional') === 'required')>Required for all users</option>
                        </select>
                        <p class="text-xs text-themed-muted mt-1">When required, every user must enroll in an authenticator app before using the dashboard.</p>
                    </div>

                    <div class="grid sm:grid-cols-2 gap-4">
                        <div>
                            <label class="field-label" for="login_max_attempts">Max login attempts</label>
                            <input id="login_max_attempts" type="number" name="login_max_attempts" min="3" max="20"
                                   value="{{ old('login_max_attempts', $settings['login_max_attempts'] ?? 5) }}" class="field-input">
                        </div>
                        <div>
                            <label class="field-label" for="login_lockout_minutes">Lockout duration (minutes)</label>
                            <input id="login_lockout_minutes" type="number" name="login_lockout_minutes" min="1" max="120"
                                   value="{{ old('login_lockout_minutes', $settings['login_lockout_minutes'] ?? 15) }}" class="field-input">
                        </div>
                    </div>

                    <div class="space-y-3">
                        @foreach ([
                            'security_headers_enabled' => 'Send security headers (HSTS on HTTPS, X-Frame-Options, nosniff)',
                            'require_device_hmac' => 'Require HMAC signatures on device API requests',
                        ] as $key => $label)
                            <label class="flex items-center justify-between gap-4 p-4 rounded-xl border border-themed bg-themed-subtle cursor-pointer">
                                <span class="text-sm font-medium">{{ $label }}</span>
                                <input type="checkbox" name="{{ $key }}" value="1" @checked(old($key, $settings[$key] ?? false))
                                       class="rounded border-themed text-teal-600 focus:ring-teal-500/30 h-5 w-5">
                            </label>
                        @endforeach
                    </div>

                    <button type="submit" class="btn-primary">Save security settings</button>
                </form>
            </div>

        @elseif ($tab === 'maintenance')
            <div class="glass-card p-5 sm:p-6">
                <h3 class="text-lg font-semibold mb-1 flex items-center gap-2">
                    <x-icon name="wrench" class="w-5 h-5 text-red-400 animate-icon-pulse" />
                    Maintenance Mode
                </h3>
                <p class="text-sm text-themed-muted mb-6">When enabled, non-admin users see a maintenance page. Admins can still access the dashboard.</p>

                @if ($settings['maintenance_mode'])
                    <div class="flash-error mb-6 !mb-6">
                        <x-icon name="wrench" class="w-5 h-5 shrink-0" />
                        <span>Maintenance mode is currently <strong>active</strong>.</span>
                    </div>
                @endif

                <form method="POST" action="{{ route('settings.maintenance') }}" class="space-y-5">
                    @csrf
                    @method('PUT')

                    <label class="flex items-center justify-between gap-4 p-4 rounded-xl border border-themed bg-themed-subtle cursor-pointer">
                        <div>
                            <span class="text-sm font-medium block">Enable maintenance mode</span>
                            <span class="text-xs text-themed-muted">Blocks dashboard access for managers and viewers</span>
                        </div>
                        <input type="checkbox" name="maintenance_mode" value="1" @checked(old('maintenance_mode', $settings['maintenance_mode']))
                               class="rounded border-themed text-red-500 focus:ring-red-500/30 h-5 w-5">
                    </label>

                    <div>
                        <label class="field-label" for="maintenance_message">Maintenance message</label>
                        <textarea id="maintenance_message" name="maintenance_message" rows="3" required
                                  class="field-input resize-y">{{ old('maintenance_message', $settings['maintenance_message']) }}</textarea>
                    </div>

                    <button type="submit" class="btn-primary">Save maintenance settings</button>
                </form>
            </div>
        @endif
    </div>
</div>
@endsection