@extends('layouts.admin')

@section('title', 'Settings')
@section('page-title', 'System Settings')

@section('content')


<div x-data="{ tab: '{{ request()->get('tab', 'info') }}', stripeOn: {{ $appSettings['integrations']['stripe_enabled'] ? 'true' : 'false' }}, paypalOn: {{ $appSettings['integrations']['paypal_enabled'] ? 'true' : 'false' }}, stripeMode: '{{ $appSettings['integrations']['stripe_mode'] }}', paypalMode: '{{ $appSettings['integrations']['paypal_mode'] }}', mailProvider: '{{ $appSettings['integrations']['mail_mailer'] }}', cryptoOn: {{ $appSettings['integrations']['crypto_enabled'] ? 'true' : 'false' }} }">

{{-- Tab bar --}}
<div class="mb-6 flex flex-wrap gap-1 rounded-2xl border border-slate-200 bg-white p-1.5 shadow-sm">
    @php
        $navTabs = [
            ['key'=>'info',        'label'=>'App Info',           'icon'=>'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'],
            ['key'=>'integrations','label'=>'Integrations',       'icon'=>'M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z'],
            ['key'=>'payment',     'label'=>'Payments',           'icon'=>'M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z'],
            ['key'=>'email',       'label'=>'Email',              'icon'=>'M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'],
            ['key'=>'push',        'label'=>'Push Notifications', 'icon'=>'M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9'],
            ['key'=>'security',    'label'=>'Security',           'icon'=>'M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z'],
            ['key'=>'maintenance', 'label'=>'Maintenance',        'icon'=>'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z'],
            ['key'=>'app-config',  'label'=>'App Config',          'icon'=>'M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z'],
            ['key'=>'seo',         'label'=>'SEO',                 'icon'=>'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'],
            ['key'=>'license',     'label'=>'License',              'icon'=>'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z'],
        ];
    @endphp
    @foreach($navTabs as $t)
        <button type="button" @click="tab='{{ $t['key'] }}'"
            :class="tab==='{{ $t['key'] }}' ? 'bg-brand-600 text-white shadow-sm' : 'text-slate-600 hover:bg-slate-100'"
            class="inline-flex items-center gap-2 rounded-xl px-4 py-2.5 text-sm font-semibold transition">
            <svg class="h-4 w-4 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="{{ $t['icon'] }}"/></svg>
            {{ $t['label'] }}
        </button>
    @endforeach
</div>

{{-- ── App Info ──────────────────────────────────────────────────────────────── --}}
<div x-show="tab==='info'" x-transition>
<div class="grid gap-6 xl:grid-cols-[0.95fr_1.05fr]">
    <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
        <h2 class="text-xl font-bold text-slate-900">Application Context</h2>
        <p class="mt-1 text-sm text-slate-500">Current environment, integrations, and configured plan limits.</p>
        <div class="mt-6 space-y-4">
            <div class="rounded-2xl bg-slate-50 p-4">
                <p class="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">App Name</p>
                <p class="mt-2 font-semibold text-slate-900">{{ $appSettings['app_name'] }}</p>
            </div>
            <div class="rounded-2xl bg-slate-50 p-4">
                <p class="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">App URL</p>
                <p class="mt-2 font-semibold text-slate-900 break-all">{{ $appSettings['app_url'] }}</p>
            </div>
            <div class="rounded-2xl bg-slate-50 p-4">
                <p class="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">Firebase Project</p>
                <p class="mt-2 font-semibold text-slate-900">
                    @if($appSettings['firebase_project'])
                        <span class="inline-flex items-center gap-2">
                            <span class="inline-block h-2 w-2 rounded-full bg-emerald-500"></span>
                            {{ $appSettings['firebase_project'] }}
                        </span>
                    @else
                        <span class="text-amber-600">Not configured</span>
                    @endif
                </p>
            </div>
            <div class="rounded-2xl bg-slate-50 p-4">
                <p class="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500 mb-3">Active Integrations</p>
                <div class="flex flex-wrap gap-2 text-xs">
                    <span class="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 font-semibold {{ $appSettings['integrations']['stripe_secret'] ? 'bg-indigo-100 text-indigo-700' : 'bg-slate-100 text-slate-500' }}">
                        <span class="h-1.5 w-1.5 rounded-full {{ $appSettings['integrations']['stripe_secret'] ? 'bg-indigo-500' : 'bg-slate-400' }}"></span>Stripe
                    </span>
                    <span class="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 font-semibold {{ $appSettings['integrations']['paypal_client_id'] ? 'bg-blue-100 text-blue-700' : 'bg-slate-100 text-slate-500' }}">
                        <span class="h-1.5 w-1.5 rounded-full {{ $appSettings['integrations']['paypal_client_id'] ? 'bg-blue-500' : 'bg-slate-400' }}"></span>PayPal
                    </span>
                    <span class="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 font-semibold {{ $appSettings['push_ready'] ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-100 text-slate-500' }}">
                        <span class="h-1.5 w-1.5 rounded-full {{ $appSettings['push_ready'] ? 'bg-emerald-500' : 'bg-slate-400' }}"></span>FCM Push
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
        <p class="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">Plan Limits</p>
        <div class="mt-4 space-y-3 text-sm text-slate-700">
            @forelse($appSettings['plans'] as $plan => $limits)
                <div class="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3">
                    <p class="font-semibold text-slate-900">{{ ucfirst($plan) }}</p>
                    <div class="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs text-slate-600">
                        <span>Stores: <strong>{{ $limits['stores'] ?? '∞' }}</strong></span>
                        <span>Products: <strong>{{ $limits['products'] ?? '∞' }}</strong></span>
                        <span>Devices: <strong>{{ $limits['devices'] ?? '∞' }}</strong></span>
                        <span>Storage: <strong>{{ $limits['storage_gb'] ?? '∞' }} GB</strong></span>
                    </div>
                </div>
            @empty
                <p class="text-slate-500">No plan limits configured.</p>
            @endforelse
        </div>
    </div>
</div>
</div>{{-- /tab: info --}}

{{-- ── Integrations ──────────────────────────────────────────────────────────── --}}
<div x-show="tab==='integrations'" x-transition>
<div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
    <h2 class="text-xl font-bold text-slate-900">Integrations</h2>
    <p class="mt-1 text-sm text-slate-500">Manage Firebase, Google Drive, and Google OAuth credentials.</p>
    <form method="POST" action="{{ route('admin.settings.firebase') }}" enctype="multipart/form-data" class="mt-6 space-y-8">
        @csrf

        {{-- Firebase --}}
        <div>
            <h3 class="mb-3 flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-slate-500">
                <svg class="h-4 w-4 text-amber-500" viewBox="0 0 24 24" fill="currentColor"><path d="M3.89 15.672L6.255.461A.341.341 0 016.59.25l2.035.462 2.366 13.08a.34.34 0 01-.24.396L3.89 15.672z"/><path d="M20.11 15.672l-2.366-15.21a.341.341 0 00-.334-.212l-2.035.462-2.366 13.08a.34.34 0 00.24.396l6.86 1.484z"/><path d="M12 2.25L8.866 16.014l6.268 1.354L12 2.25z"/></svg>
                Firebase
            </h3>
            <div class="grid gap-4 md:grid-cols-2">
                <div>
                    <label class="mb-1.5 block text-sm font-semibold text-slate-700">Project ID</label>
                    <input type="text" name="firebase_project_id" value="{{ old('firebase_project_id', $appSettings['firebase_project']) }}" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                </div>
                <div>
                    <label class="mb-1.5 block text-sm font-semibold text-slate-700">Web API Key <span class="font-normal text-slate-400">(for Google login token verify)</span></label>
                    <input type="text" name="firebase_api_key" value="{{ old('firebase_api_key', $appSettings['integrations']['firebase_api_key']) }}" placeholder="AIza…" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                </div>
                <div class="md:col-span-2">
                    <label class="mb-1.5 block text-sm font-semibold text-slate-700">Service Account JSON <span class="font-normal text-slate-400">(for FCM v1 push)</span></label>
                    <input type="file" name="firebase_service_account" accept=".json,application/json,text/plain" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                    <p class="mt-1 text-xs text-slate-500">Current: <code class="font-mono {{ $appSettings['integrations']['firebase_service_account_json'] ? 'text-emerald-600' : 'text-amber-600' }}">{{ $appSettings['integrations']['firebase_service_account_json'] ?: 'Not uploaded' }}</code></p>
                </div>
            </div>
        </div>

        <hr class="border-slate-200">

        {{-- Google Drive --}}
        <div>
            <h3 class="mb-3 flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-slate-500">
                <svg class="h-4 w-4 text-green-500" viewBox="0 0 87.3 78" fill="currentColor"><path fill="#0066da" d="M6.6 66.85l3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3L28.65 52H0c0 1.55.4 3.1 1.2 4.5z"/><path fill="#00ac47" d="M43.65 25L29.2 1.2C27.85.4 26.3 0 24.75 0 23.2 0 21.65.4 20.3 1.2L2.45 33.25c-1 1.7-1.5 3.5-1.5 5.35h27.3z"/><path fill="#ea4335" d="M73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5H60.01l5.85 10.9z"/><path fill="#00832d" d="M43.65 25L57.1 1.2c-1.35-.8-2.9-1.2-4.45-1.2s-3.1.4-4.45 1.2L34.2 25z"/><path fill="#2684fc" d="M59.4 52L43.65 25 28.65 52z"/><path fill="#ffba00" d="M87.3 38.6c0-1.85-.5-3.65-1.5-5.35L69.6 5.5c-.8-1.4-1.95-2.5-3.3-3.3L52.85 25H80.2l7.1 13.6z"/></svg>
                Google Drive
            </h3>
            <div>
                <label class="mb-1.5 block text-sm font-semibold text-slate-700">Drive API Key</label>
                <input type="text" name="google_drive_api_key" value="{{ old('google_drive_api_key', $appSettings['integrations']['google_drive_api_key']) }}" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
            </div>
        </div>

        <hr class="border-slate-200">

        {{-- Google Desktop OAuth (Windows / macOS / Linux) --}}
        <div>
            <h3 class="mb-3 flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-slate-500">
                <svg class="h-4 w-4 text-blue-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                Google Sign-In (Desktop)
            </h3>
            <p class="mb-4 text-xs text-slate-500">OAuth 2.0 Desktop client credentials from <a href="https://console.cloud.google.com/apis/credentials" target="_blank" class="text-brand-600 underline">Google Cloud Console</a> → Create Credentials → Desktop app. Used by Windows / macOS / Linux builds.</p>
            <div class="grid gap-4 md:grid-cols-2">
                <div>
                    <label class="mb-1.5 block text-sm font-semibold text-slate-700">Desktop Client ID</label>
                    <input type="text" name="google_desktop_client_id" value="{{ old('google_desktop_client_id', $appSettings['integrations']['google_desktop_client_id']) }}" placeholder="xxxxxxxx.apps.googleusercontent.com" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                </div>
                <div>
                    <label class="mb-1.5 block text-sm font-semibold text-slate-700">Desktop Client Secret</label>
                    <input type="text" name="google_desktop_client_secret" value="{{ old('google_desktop_client_secret', $appSettings['integrations']['google_desktop_client_secret']) }}" placeholder="GOCSPX-…" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                </div>
            </div>
        </div>

        <button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-brand-600 px-5 py-3 text-sm font-semibold text-white transition hover:bg-brand-700">
            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
            Save Integration Settings
        </button>
    </form>
</div>
</div>{{-- /tab: integrations --}}

{{-- ── Email ──────────────────────────────────────────────────────────────────── --}}
<div x-show="tab==='email'" x-transition>
<div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
    <h2 class="text-xl font-bold text-slate-900">Email</h2>
    <p class="mt-1 text-sm text-slate-500">Configure outgoing email delivery for notifications and receipts.</p>
    <form method="POST" action="{{ route('admin.settings.mail') }}" class="mt-6 space-y-8">
        @csrf
        <div>
            <div class="mb-4 flex items-center justify-between">
                <h3 class="flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-slate-500">
                    <svg class="h-4 w-4 text-pink-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                    Email Provider
                </h3>
            </div>
            <div class="mb-4 flex gap-2">
                <label class="inline-flex cursor-pointer items-center gap-2 rounded-xl border px-4 py-2 text-sm font-medium transition" :class="mailProvider === 'log' ? 'border-slate-600 bg-slate-100 text-slate-900' : 'border-slate-200 text-slate-500 hover:border-slate-400'">
                    <input type="radio" name="mail_mailer" value="log" x-model="mailProvider" class="sr-only">
                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                    Disabled (log)
                </label>
                <label class="inline-flex cursor-pointer items-center gap-2 rounded-xl border px-4 py-2 text-sm font-medium transition" :class="mailProvider === 'smtp' ? 'border-brand-600 bg-brand-50 text-brand-700' : 'border-slate-200 text-slate-500 hover:border-slate-400'">
                    <input type="radio" name="mail_mailer" value="smtp" x-model="mailProvider" class="sr-only">
                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M12 5l7 7-7 7"/></svg>
                    Custom SMTP
                </label>
                <label class="inline-flex cursor-pointer items-center gap-2 rounded-xl border px-4 py-2 text-sm font-medium transition" :class="mailProvider === 'brevo' ? 'border-blue-500 bg-blue-50 text-blue-700' : 'border-slate-200 text-slate-500 hover:border-slate-400'">
                    <input type="radio" name="mail_mailer" value="brevo" x-model="mailProvider" class="sr-only">
                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                    Brevo (Sendinblue)
                </label>
            </div>
            {{-- Custom SMTP fields --}}
            <div x-show="mailProvider === 'smtp'" x-transition class="grid gap-4 md:grid-cols-2">
                <div>
                    <label class="mb-1.5 block text-sm font-semibold text-slate-700">SMTP Host</label>
                    <input type="text" name="mail_host" value="{{ old('mail_host', $appSettings['integrations']['mail_host']) }}" placeholder="smtp.example.com" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                </div>
                <div>
                    <label class="mb-1.5 block text-sm font-semibold text-slate-700">Port</label>
                    <input type="number" name="mail_port" value="{{ old('mail_port', $appSettings['integrations']['mail_port']) }}" placeholder="587" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                </div>
                <div>
                    <label class="mb-1.5 block text-sm font-semibold text-slate-700">Username</label>
                    <input type="text" name="mail_username" value="{{ old('mail_username', $appSettings['integrations']['mail_username']) }}" placeholder="user@example.com" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                </div>
                <div>
                    <label class="mb-1.5 block text-sm font-semibold text-slate-700">Password <span class="font-normal text-slate-400">(leave blank to keep current)</span></label>
                    <input type="password" name="mail_password" placeholder="••••••••" autocomplete="new-password" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                </div>
                <div>
                    <label class="mb-1.5 block text-sm font-semibold text-slate-700">From Address</label>
                    <input type="email" name="mail_from_address" value="{{ old('mail_from_address', $appSettings['integrations']['mail_from_address']) }}" placeholder="noreply@example.com" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                </div>
                <div>
                    <label class="mb-1.5 block text-sm font-semibold text-slate-700">Encryption</label>
                    <select name="mail_encryption" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                        <option value="tls" {{ $appSettings['integrations']['mail_encryption'] === 'tls' ? 'selected' : '' }}>TLS (STARTTLS — port 587)</option>
                        <option value="ssl" {{ $appSettings['integrations']['mail_encryption'] === 'ssl' ? 'selected' : '' }}>SSL (port 465)</option>
                        <option value="" {{ $appSettings['integrations']['mail_encryption'] === '' ? 'selected' : '' }}>None</option>
                    </select>
                </div>
            </div>
            {{-- Brevo API key field --}}
            <div x-show="mailProvider === 'brevo'" x-transition>
                <label class="mb-1.5 block text-sm font-semibold text-slate-700">Brevo API Key</label>
                <input type="password" name="brevo_api_key" value="{{ old('brevo_api_key', $appSettings['integrations']['brevo_api_key']) }}" placeholder="xkeysib-…" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                <p class="mt-1 text-xs text-slate-500">Get your API key from <span class="font-medium">app.brevo.com &rarr; SMTP &amp; API &rarr; API Keys</span>.</p>
            </div>
            {{-- Disabled note --}}
            <div x-show="mailProvider === 'log'" x-transition class="flex items-start gap-3 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3">
                <svg class="mt-0.5 h-4 w-4 flex-shrink-0 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                <p class="text-xs text-slate-500">Emails are written to the Laravel log file only. No emails are sent to users.</p>
            </div>
        </div>

        <button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-brand-600 px-5 py-3 text-sm font-semibold text-white transition hover:bg-brand-700">
            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
            Save Email Settings
        </button>
    </form>

    {{-- Test Email (separate form) --}}
    <div x-show="mailProvider !== 'log'" x-transition class="mt-6 rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
        <h3 class="flex items-center gap-2 text-sm font-bold text-slate-800">
            <svg class="h-4 w-4 text-pink-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
            Send Test Email
        </h3>
        <p class="mt-1 text-xs text-slate-500">Verify your email configuration by sending a test message. Save settings above first.</p>
        <form method="POST" action="{{ route('admin.settings.test-email') }}" class="mt-4 flex gap-3">
            @csrf
            <input type="email" name="test_email_to" value="{{ old('test_email_to', Auth::user()->email ?? '') }}" placeholder="recipient@example.com" required
                class="flex-1 rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
            <button type="submit" class="inline-flex items-center gap-2 rounded-2xl bg-pink-600 px-5 py-3 text-sm font-semibold text-white transition hover:bg-pink-700">
                <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
                Send Test
            </button>
        </form>
    </div>
</div>
</div>{{-- /tab: email --}}

{{-- ── Payments ──────────────────────────────────────────────────────────────── --}}
<div x-show="tab==='payment'" x-transition>
<div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
    <h2 class="text-xl font-bold text-slate-900">Payments</h2>
    <p class="mt-1 text-sm text-slate-500">Enable and configure Stripe, PayPal, and crypto payment methods.</p>
    <form method="POST" action="{{ route('admin.settings.payments') }}" class="mt-6 space-y-8">
        @csrf

        {{-- Stripe --}}
        <div>
            <div class="mb-4 flex items-center justify-between">
                <h3 class="flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-slate-500">
                    <svg class="h-4 w-4 text-indigo-600" viewBox="0 0 24 24" fill="currentColor"><path d="M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C4.352 23.6 7.048 24 9.82 24c2.952 0 5.119-.64 6.625-1.932 1.619-1.385 2.355-3.284 2.355-5.558-.06-4.059-2.545-5.819-6.824-7.36z"/></svg>
                    Stripe
                </h3>
                <label class="inline-flex cursor-pointer items-center gap-3">
                    <span class="text-sm font-medium text-slate-600" x-text="stripeOn ? 'Enabled' : 'Disabled'"></span>
                    <button type="button" @click="stripeOn = !stripeOn"
                        :class="stripeOn ? 'bg-indigo-600' : 'bg-slate-300'"
                        class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none">
                        <span :class="stripeOn ? 'translate-x-6' : 'translate-x-1'" class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform"></span>
                    </button>
                    <input type="hidden" name="stripe_enabled" :value="stripeOn ? '1' : '0'">
                </label>
            </div>
            <div x-show="stripeOn" x-transition class="space-y-4">
                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Mode</label>
                    <div class="flex gap-4">
                        <label class="inline-flex cursor-pointer items-center gap-2">
                            <input type="radio" name="stripe_mode" value="sandbox" x-model="stripeMode" class="text-indigo-600 focus:ring-indigo-500">
                            <span class="text-sm text-slate-700">Sandbox <span class="text-xs text-slate-400">(testing)</span></span>
                        </label>
                        <label class="inline-flex cursor-pointer items-center gap-2">
                            <input type="radio" name="stripe_mode" value="live" x-model="stripeMode" class="text-indigo-600 focus:ring-indigo-500">
                            <span class="text-sm text-slate-700">Live <span class="text-xs text-amber-500 font-semibold">(real payments)</span></span>
                        </label>
                    </div>
                </div>
                <div class="grid gap-4 md:grid-cols-2">
                    <div>
                        <label class="mb-1.5 block text-sm font-semibold text-slate-700">Publishable Key</label>
                        <input type="text" name="stripe_key" value="{{ old('stripe_key', $appSettings['integrations']['stripe_key']) }}" placeholder="pk_live_… / pk_test_…" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                    </div>
                    <div>
                        <label class="mb-1.5 block text-sm font-semibold text-slate-700">Secret Key</label>
                        <input type="password" name="stripe_secret" value="{{ old('stripe_secret', $appSettings['integrations']['stripe_secret']) }}" placeholder="sk_live_… / sk_test_…" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                    </div>
                    <div class="md:col-span-2">
                        <label class="mb-1.5 block text-sm font-semibold text-slate-700">Webhook Secret</label>
                        <input type="password" name="stripe_webhook_secret" value="{{ old('stripe_webhook_secret', $appSettings['integrations']['stripe_webhook_secret']) }}" placeholder="whsec_…" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                        <p class="mt-1 text-xs text-slate-500">Endpoint: <code class="font-mono">{{ config('app.url') }}/api/billing/stripe/webhook</code></p>
                    </div>
                </div>
            </div>
        </div>

        <hr class="border-slate-200">

        {{-- PayPal --}}
        <div>
            <div class="mb-4 flex items-center justify-between">
                <h3 class="flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-slate-500">
                    <svg class="h-4 w-4 text-blue-600" viewBox="0 0 24 24" fill="currentColor"><path d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19a.75.75 0 0 0-.74.627l-.09.532-.711 4.49-.018.113a.641.641 0 0 1-.632.54z"/></svg>
                    PayPal
                </h3>
                <label class="inline-flex cursor-pointer items-center gap-3">
                    <span class="text-sm font-medium text-slate-600" x-text="paypalOn ? 'Enabled' : 'Disabled'"></span>
                    <button type="button" @click="paypalOn = !paypalOn"
                        :class="paypalOn ? 'bg-blue-600' : 'bg-slate-300'"
                        class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none">
                        <span :class="paypalOn ? 'translate-x-6' : 'translate-x-1'" class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform"></span>
                    </button>
                    <input type="hidden" name="paypal_enabled" :value="paypalOn ? '1' : '0'">
                </label>
            </div>
            <div x-show="paypalOn" x-transition class="space-y-4">
                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Mode</label>
                    <div class="flex gap-4">
                        <label class="inline-flex cursor-pointer items-center gap-2">
                            <input type="radio" name="paypal_mode" value="sandbox" x-model="paypalMode" class="text-blue-600 focus:ring-blue-500">
                            <span class="text-sm text-slate-700">Sandbox <span class="text-xs text-slate-400">(testing)</span></span>
                        </label>
                        <label class="inline-flex cursor-pointer items-center gap-2">
                            <input type="radio" name="paypal_mode" value="live" x-model="paypalMode" class="text-blue-600 focus:ring-blue-500">
                            <span class="text-sm text-slate-700">Live <span class="text-xs text-amber-500 font-semibold">(real payments)</span></span>
                        </label>
                    </div>
                </div>
                <div class="grid gap-4 md:grid-cols-2">
                    <div>
                        <label class="mb-1.5 block text-sm font-semibold text-slate-700">Client ID</label>
                        <input type="text" name="paypal_client_id" value="{{ old('paypal_client_id', $appSettings['integrations']['paypal_client_id']) }}" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                    </div>
                    <div>
                        <label class="mb-1.5 block text-sm font-semibold text-slate-700">Secret</label>
                        <input type="password" name="paypal_secret" value="{{ old('paypal_secret', $appSettings['integrations']['paypal_secret']) }}" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                    </div>
                    <div>
                        <label class="mb-1.5 block text-sm font-semibold text-slate-700">Webhook ID</label>
                        <input type="text" name="paypal_webhook_id" value="{{ old('paypal_webhook_id', $appSettings['integrations']['paypal_webhook_id']) }}" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                    </div>
                    <div>
                        <label class="mb-1.5 block text-sm font-semibold text-slate-700">Base URL</label>
                        <input type="url" name="paypal_base_url" value="{{ old('paypal_base_url', $appSettings['integrations']['paypal_base_url']) }}" placeholder="https://api-m.sandbox.paypal.com" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                        <p class="mt-1 text-xs text-slate-500">Endpoint: <code class="font-mono">{{ config('app.url') }}/api/billing/paypal/webhook</code></p>
                    </div>
                </div>
            </div>
        </div>

        {{-- Crypto Payments --}}
        <hr class="border-slate-200">
        <div>
            <div class="mb-4 flex items-center justify-between">
                <h3 class="flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-slate-500">
                    <svg class="h-4 w-4 text-amber-500" viewBox="0 0 24 24" fill="currentColor"><path d="M11.944 17.97L4.58 13.62 11.943 24l7.37-10.38-7.372 4.35h.003zM12.056 0L4.69 12.223l7.365 4.354 7.365-4.35L12.056 0z"/></svg>
                    Crypto Payments
                </h3>
                <label class="inline-flex cursor-pointer items-center gap-3">
                    <span class="text-sm font-medium text-slate-600" x-text="cryptoOn ? 'Enabled' : 'Disabled'"></span>
                    <button type="button" @click="cryptoOn = !cryptoOn"
                        :class="cryptoOn ? 'bg-amber-500' : 'bg-slate-300'"
                        class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none">
                        <span :class="cryptoOn ? 'translate-x-6' : 'translate-x-1'" class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform"></span>
                    </button>
                    <input type="hidden" name="crypto_enabled" :value="cryptoOn ? '1' : '0'">
                </label>
            </div>
            <div x-show="cryptoOn" x-transition class="space-y-4">
                <div class="flex items-start gap-3 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3">
                    <svg class="mt-0.5 h-4 w-4 flex-shrink-0 text-amber-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    <p class="text-xs text-amber-700">Crypto payments require <strong>manual confirmation</strong> by an admin. Payments are not automatically verified.</p>
                </div>
                <div class="grid gap-4 md:grid-cols-3">
                    <div>
                        <label class="mb-1.5 block text-sm font-semibold text-slate-700">Bitcoin (BTC)</label>
                        <input type="text" name="crypto_wallet_btc" value="{{ old('crypto_wallet_btc', $appSettings['integrations']['crypto_wallet_btc']) }}" placeholder="bc1q…" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm font-mono outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                    </div>
                    <div>
                        <label class="mb-1.5 block text-sm font-semibold text-slate-700">Ethereum (ETH)</label>
                        <input type="text" name="crypto_wallet_eth" value="{{ old('crypto_wallet_eth', $appSettings['integrations']['crypto_wallet_eth']) }}" placeholder="0x…" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm font-mono outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                    </div>
                    <div>
                        <label class="mb-1.5 block text-sm font-semibold text-slate-700">USDT (TRC20 / ERC20)</label>
                        <input type="text" name="crypto_wallet_usdt" value="{{ old('crypto_wallet_usdt', $appSettings['integrations']['crypto_wallet_usdt']) }}" placeholder="T… / 0x…" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm font-mono outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                    </div>
                </div>
            </div>
        </div>

        <button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-brand-600 px-5 py-3 text-sm font-semibold text-white transition hover:bg-brand-700">
            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
            Save Payment Settings
        </button>
    </form>
</div>
</div>{{-- /tab: payment --}}

{{-- ── Push Notifications ────────────────────────────────────────────────────── --}}
<div x-show="tab==='push'" x-transition>
<div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
    <h2 class="text-xl font-bold text-slate-900">Push Notifications</h2>
    <p class="mt-1 text-sm text-slate-500">Send a test Firebase Cloud Messaging notification to any active device.</p>

    <div class="mt-4 flex items-center gap-3 rounded-2xl border {{ $appSettings['push_ready'] ? 'border-emerald-200 bg-emerald-50' : 'border-amber-200 bg-amber-50' }} px-5 py-3">
        <span class="flex h-8 w-8 items-center justify-center rounded-full {{ $appSettings['push_ready'] ? 'bg-emerald-100 text-emerald-600' : 'bg-amber-100 text-amber-600' }}">
            @if($appSettings['push_ready'])
                <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
            @else
                <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            @endif
        </span>
        <p class="text-sm font-medium {{ $appSettings['push_ready'] ? 'text-emerald-700' : 'text-amber-700' }}">
            @if($appSettings['push_ready'])
                Firebase HTTP v1 is ready — push notifications can be sent.
            @else
                Upload the service-account JSON in the <button type="button" @click="tab='integrations'" class="underline font-semibold">Integrations</button> tab to enable push notifications.
            @endif
        </p>
    </div>

    <div class="mt-5 flex items-center gap-3 rounded-2xl border border-slate-200 bg-slate-50 px-5 py-3 text-sm text-slate-600">
        <svg class="h-5 w-5 text-slate-400" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
        <strong class="text-slate-900">{{ $devices->count() }}</strong>&nbsp;device{{ $devices->count() !== 1 ? 's' : '' }} with active FCM tokens
    </div>

    <form method="POST" action="{{ route('admin.settings.test-notification') }}" class="mt-6 space-y-4">
        @csrf
        <div>
            <label class="mb-1.5 block text-sm font-semibold text-slate-700">Target Device</label>
            <select name="device_id" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10" @if($devices->isEmpty()) disabled @endif>
                @forelse($devices as $device)
                    <option value="{{ $device->id }}">{{ $device->user->name ?? 'Unknown' }} — {{ $device->device_id }} — {{ strtoupper($device->platform) }}</option>
                @empty
                    <option value="">No devices with FCM tokens found</option>
                @endforelse
            </select>
        </div>
        <div class="grid gap-4 md:grid-cols-2">
            <div>
                <label class="mb-1.5 block text-sm font-semibold text-slate-700">Title</label>
                <input type="text" name="title" value="{{ old('title', 'Quickro POS notification test') }}" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
            </div>
            <div>
                <label class="mb-1.5 block text-sm font-semibold text-slate-700">Message</label>
                <input type="text" name="body" value="{{ old('body', 'Push notifications are configured and reaching this device.') }}" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
            </div>
        </div>
        <button type="submit" @if($devices->isEmpty() || !$appSettings['push_ready']) disabled @endif
            class="inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-slate-900 px-5 py-3 text-sm font-semibold text-white transition hover:bg-slate-700 disabled:opacity-40 disabled:cursor-not-allowed">
            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
            Send Test Push Notification
        </button>
    </form>

    @if($devices->isNotEmpty())
    <div class="mt-8">
        <p class="text-sm font-semibold text-slate-700 mb-3">Registered Devices</p>
        <div class="overflow-x-auto rounded-2xl border border-slate-200">
            <table class="min-w-full text-left text-xs">
                <thead class="bg-slate-50 border-b border-slate-200 text-slate-500">
                    <tr>
                        <th class="px-4 py-3 font-semibold">User</th>
                        <th class="px-4 py-3 font-semibold">Device ID</th>
                        <th class="px-4 py-3 font-semibold">Platform</th>
                        <th class="px-4 py-3 font-semibold">FCM Token (preview)</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @foreach($devices as $device)
                    <tr>
                        <td class="px-4 py-3 font-medium text-slate-900">{{ $device->user->name ?? '—' }}</td>
                        <td class="px-4 py-3 font-mono text-slate-600">{{ Str::limit($device->device_id, 20) }}</td>
                        <td class="px-4 py-3 uppercase text-slate-600">{{ $device->platform }}</td>
                        <td class="px-4 py-3 font-mono text-slate-400">{{ Str::limit($device->fcm_token, 32) }}…</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif
</div>
</div>{{-- /tab: push --}}

{{-- ── Security ──────────────────────────────────────────────────────────────── --}}
<div x-show="tab==='security'" x-transition>
<div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm max-w-xl">
    <h2 class="text-xl font-bold text-slate-900">Change Admin Password</h2>
    <p class="mt-1 text-sm text-slate-500">Update the password for your admin account.</p>
    <form method="POST" action="{{ route('admin.settings.password') }}" class="mt-6 space-y-4">
        @csrf
        <div>
            <label class="mb-1.5 block text-sm font-semibold text-slate-700">Current Password</label>
            <input type="password" name="current_password" required autocomplete="current-password" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
        </div>
        <div>
            <label class="mb-1.5 block text-sm font-semibold text-slate-700">New Password</label>
            <input type="password" name="password" required autocomplete="new-password" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
        </div>
        <div>
            <label class="mb-1.5 block text-sm font-semibold text-slate-700">Confirm New Password</label>
            <input type="password" name="password_confirmation" required autocomplete="new-password" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
        </div>
        <button type="submit" class="inline-flex w-full items-center justify-center rounded-2xl bg-brand-600 px-5 py-3 text-sm font-semibold text-white transition hover:bg-brand-700">Update Password</button>
    </form>
</div>
</div>{{-- /tab: security --}}

{{-- ── Maintenance ───────────────────────────────────────────────────────────── --}}
<div x-show="tab==='maintenance'" x-transition>
<div class="grid gap-6 xl:grid-cols-2">
    <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
        <h2 class="text-xl font-bold text-slate-900">Clear Application Cache</h2>
        <p class="mt-2 text-sm text-slate-500">Clears config, route, and view cache. Run this after updating <code class="font-mono">.env</code> values.</p>
        <form method="POST" action="{{ route('admin.settings.clear-cache') }}" class="mt-6">
            @csrf
            <button type="submit" class="inline-flex items-center gap-2 rounded-2xl bg-slate-900 px-5 py-3 text-sm font-semibold text-white transition hover:bg-slate-700">
                <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                Clear Cache
            </button>
        </form>
    </div>
    <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
        <h2 class="text-xl font-bold text-slate-900">Environment</h2>
        <div class="mt-4 space-y-3 text-sm">
            <div class="flex justify-between border-b border-slate-100 pb-2">
                <span class="text-slate-500">PHP Version</span>
                <span class="font-semibold text-slate-900">{{ PHP_MAJOR_VERSION }}.{{ PHP_MINOR_VERSION }}.{{ PHP_RELEASE_VERSION }}</span>
            </div>
            <div class="flex justify-between border-b border-slate-100 pb-2">
                <span class="text-slate-500">Laravel</span>
                <span class="font-semibold text-slate-900">{{ app()->version() }}</span>
            </div>
            <div class="flex justify-between border-b border-slate-100 pb-2">
                <span class="text-slate-500">Environment</span>
                <span class="font-semibold {{ app()->environment('production') ? 'text-emerald-600' : 'text-amber-600' }}">{{ ucfirst(app()->environment()) }}</span>
            </div>
            <div class="flex justify-between">
                <span class="text-slate-500">Debug Mode</span>
                <span class="font-semibold {{ config('app.debug') ? 'text-red-600' : 'text-emerald-600' }}">{{ config('app.debug') ? 'ON' : 'OFF' }}</span>
            </div>
        </div>
    </div>
</div>
</div>{{-- /tab: maintenance --}}

{{-- ── App Config ──────────────────────────────────────────────────────────────────── --}}
<div x-show="tab==='app-config'" x-transition>
<div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm max-w-xl">
    <h2 class="text-xl font-bold text-slate-900">Mobile App Configuration</h2>
    <p class="mt-1 text-sm text-slate-500">Server URL exposed to the Flutter app via the public <code class="font-mono">/api/app-config</code> endpoint. Change this when you move the server to a new domain or port.</p>
    <form method="POST" action="{{ route('admin.settings.app-config') }}" class="mt-6 space-y-5">
        @csrf
        <div>
            <label class="mb-1.5 block text-sm font-semibold text-slate-700">Server Base URL</label>
            <input type="url" name="app_url" value="{{ old('app_url', $appSettings['app_url']) }}" required
                placeholder="https://api.yourserver.com"
                class="w-full rounded-2xl border border-slate-300 px-4 py-3 font-mono text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
            <p class="mt-1 text-xs text-slate-500">No trailing slash. Used as <code class="font-mono">APP_URL</code> and <code class="font-mono">APP_CLIENT_URL</code> in <code class="font-mono">.env</code>.</p>
        </div>
        <hr class="border-slate-200">
        <div>
            <h3 class="mb-1 text-sm font-semibold text-slate-700">One-Time (Lifetime) Plan Pricing</h3>
            <p class="mb-3 text-xs text-slate-500">Lifetime purchase prices shown in the Flutter app subscription screen. Changes take effect immediately after saving.</p>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="mb-1.5 block text-sm font-semibold text-slate-700">Growth Lifetime Price (USD)</label>
                    <div class="relative">
                        <span class="pointer-events-none absolute inset-y-0 left-4 flex items-center text-slate-400 text-sm">$</span>
                        <input type="number" name="growth_onetime_price" min="0" step="0.01"
                            value="{{ old('growth_onetime_price', $appSettings['plans']['growth']['pricing']['one-time'] ?? 99.99) }}"
                            class="w-full rounded-2xl border border-slate-300 pl-8 pr-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                    </div>
                </div>
                <div>
                    <label class="mb-1.5 block text-sm font-semibold text-slate-700">Pro Lifetime Price (USD)</label>
                    <div class="relative">
                        <span class="pointer-events-none absolute inset-y-0 left-4 flex items-center text-slate-400 text-sm">$</span>
                        <input type="number" name="pro_onetime_price" min="0" step="0.01"
                            value="{{ old('pro_onetime_price', $appSettings['plans']['pro']['pricing']['one-time'] ?? 199.99) }}"
                            class="w-full rounded-2xl border border-slate-300 pl-8 pr-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                    </div>
                </div>
            </div>
        </div>
        <button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-brand-600 px-5 py-3 text-sm font-semibold text-white transition hover:bg-brand-700">
            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
            Save App Configuration
        </button>
    </form>
</div>
</div>{{-- /tab: app-config --}}

{{-- ── License ──────────────────────────────────────────────────────────────── --}}
<div x-show="tab==='license'" x-transition>
<div class="max-w-xl space-y-6">

    {{-- Status card --}}
    @php
        $licVerified = $appSettings['license']['verified'];
        $licType     = $appSettings['license']['type'];
    @endphp
    <div class="rounded-3xl p-6 {{ $licVerified ? 'bg-emerald-600' : 'bg-rose-600' }} text-white shadow-lg">
        <p class="text-xs font-bold uppercase tracking-[0.24em] opacity-80">License Status</p>
        <div class="mt-3 flex items-center gap-3">
            <span class="flex h-10 w-10 items-center justify-center rounded-full bg-white/20">
                @if($licVerified)
                    <svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                @else
                    <svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                @endif
            </span>
            <div>
                <p class="text-2xl font-black">{{ $licVerified ? '✓ Verified' : 'Not Activated' }}</p>
                @if($licType)
                    <p class="mt-0.5 text-sm font-semibold opacity-90">License Type: <span class="capitalize">{{ $licType }}</span></p>
                @endif
            </div>
        </div>
    </div>

    {{-- Update form --}}
    <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
        <h2 class="text-lg font-bold text-slate-900">License Verification</h2>
        <p class="mt-1 text-sm text-slate-500">Enter your Quickro POS purchase code and buyer email to verify or re-activate the license.</p>

        @if(session('success') && request()->get('tab') === 'license')
            <div class="mt-4 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-700">{{ session('success') }}</div>
        @endif
        @if($errors->any())
            <div class="mt-4 rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-600">
                @foreach($errors->all() as $err)<p>{{ $err }}</p>@endforeach
            </div>
        @endif

        <form method="POST" action="{{ route('admin.settings.license') }}?tab=license" class="mt-5 space-y-4">
            @csrf
            <div x-data="{ showCode: false }">
                <label class="mb-1.5 block text-sm font-semibold text-slate-700">Envato Purchase Code <span class="text-rose-500">*</span></label>
                <div class="relative">
                    <input :type="showCode ? 'text' : 'password'" name="purchase_code"
                        value="{{ old('purchase_code') }}"
                        placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
                        required
                        class="w-full rounded-2xl border border-slate-300 px-4 py-3 pr-12 text-sm font-mono outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                    <button type="button" @click="showCode = !showCode"
                        class="absolute right-3 top-1/2 -translate-y-1/2 p-1 text-slate-400 hover:text-slate-700">
                        <svg x-show="!showCode" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                        </svg>
                        <svg x-show="showCode" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/>
                        </svg>
                    </button>
                </div>
            </div>
            <div>
                <label class="mb-1.5 block text-sm font-semibold text-slate-700">Buyer Email <span class="text-rose-500">*</span></label>
                <input type="email" name="buyer_email"
                    value="{{ old('buyer_email', $appSettings['license']['buyer_email']) }}"
                    placeholder="email@example.com"
                    required
                    class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                @if($appSettings['license']['buyer_email'])
                    <p class="mt-1 text-xs text-slate-400">Current: {{ $appSettings['license']['buyer_email'] }}</p>
                @endif
            </div>
            <button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-brand-600 px-5 py-3 text-sm font-semibold text-white transition hover:bg-brand-700">
                <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                {{ $appSettings['license']['verified'] ? 'Re-activate License' : 'Activate License' }}
            </button>
        </form>

        @if($appSettings['license']['verified'])
        <div class="mt-4 rounded-2xl border border-rose-200 bg-rose-50 p-4">
            <p class="text-sm font-semibold text-rose-700">Remove License</p>
            <p class="mt-1 text-xs text-slate-500">Deactivate this installation so the license can be used on a different domain.</p>
            <form method="POST" action="{{ route('admin.settings.license.remove') }}" class="mt-3"
                  onsubmit="return confirm('Remove the license from this domain? The admin panel will be locked until a new license is activated.')">
                @csrf
                <button type="submit" class="inline-flex items-center gap-2 rounded-xl border border-rose-300 px-4 py-2 text-sm font-semibold text-rose-600 transition hover:bg-rose-100">
                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                    Remove License from this Domain
                </button>
            </form>
        </div>
        @endif
    </div>

</div>
</div>{{-- /tab: license --}}

{{-- ── SEO ──────────────────────────────────────────────────────────────────── --}}
<div x-show="tab==='seo'" x-transition>
<form method="POST" action="{{ route('admin.settings.seo') }}">
@csrf
<div class="grid gap-6 xl:grid-cols-2">

    {{-- Search Engine Verification --}}
    <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
        <h2 class="text-xl font-bold text-slate-900">Search Engine Verification</h2>
        <p class="mt-1 text-sm text-slate-500">Paste the content value from each platform's verification meta tag.</p>
        <div class="mt-6 space-y-4">
            <div>
                <label class="mb-1.5 block text-sm font-semibold text-slate-700">
                    <span class="inline-flex items-center gap-2">
                        <svg class="h-4 w-4 text-blue-600" viewBox="0 0 24 24" fill="currentColor"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg>
                        Google Search Console
                    </span>
                </label>
                <input type="text" name="google_site_verification"
                    value="{{ old('google_site_verification', $appSettings['seo']['google_site_verification']) }}"
                    placeholder="e.g. abc123XYZ..."
                    class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                <p class="mt-1 text-xs text-slate-500">Renders as <code class="font-mono">&lt;meta name="google-site-verification" content="…"&gt;</code></p>
            </div>
            <div>
                <label class="mb-1.5 block text-sm font-semibold text-slate-700">
                    <span class="inline-flex items-center gap-2">
                        <svg class="h-4 w-4 text-sky-500" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.372 0 0 5.373 0 12s5.372 12 12 12 12-5.373 12-12S18.628 0 12 0zm5.994 16.318c-.334.553-.902.882-1.52.882h-8.95c-.618 0-1.186-.329-1.52-.882-.334-.553-.334-1.236 0-1.789l4.475-7.418c.334-.553.903-.882 1.52-.882.618 0 1.187.329 1.52.882l4.475 7.418c.334.553.334 1.236 0 1.789z"/></svg>
                        Bing Webmaster Tools
                    </span>
                </label>
                <input type="text" name="bing_site_verification"
                    value="{{ old('bing_site_verification', $appSettings['seo']['bing_site_verification']) }}"
                    placeholder="e.g. XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
                    class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                <p class="mt-1 text-xs text-slate-500">Renders as <code class="font-mono">&lt;meta name="msvalidate.01" content="…"&gt;</code></p>
            </div>
            <div>
                <label class="mb-1.5 block text-sm font-semibold text-slate-700">Google Analytics (GA4) Measurement ID</label>
                <input type="text" name="google_analytics_id"
                    value="{{ old('google_analytics_id', $appSettings['seo']['google_analytics_id']) }}"
                    placeholder="G-XXXXXXXXXX"
                    class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                <p class="mt-1 text-xs text-slate-500">Injects the GA4 gtag.js snippet automatically when set.</p>
            </div>
        </div>
    </div>

    {{-- Default Meta / OG Tags --}}
    <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
        <h2 class="text-xl font-bold text-slate-900">Default Meta & Open Graph</h2>
        <p class="mt-1 text-sm text-slate-500">Fallback meta tags used on website pages without specific SEO overrides.</p>
        <div class="mt-6 space-y-4">
            <div>
                <label class="mb-1.5 block text-sm font-semibold text-slate-700">Default Page Title</label>
                <input type="text" name="meta_title" maxlength="70"
                    value="{{ old('meta_title', $appSettings['seo']['meta_title']) }}"
                    placeholder="{{ config('app.name') }} — POS System"
                    class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                <p class="mt-1 text-xs text-slate-500">Recommended: under 60 characters.</p>
            </div>
            <div>
                <label class="mb-1.5 block text-sm font-semibold text-slate-700">Meta Description</label>
                <textarea name="meta_description" rows="3" maxlength="160"
                    placeholder="Brief description of your website (max 160 characters)."
                    class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">{{ old('meta_description', $appSettings['seo']['meta_description']) }}</textarea>
                <p class="mt-1 text-xs text-slate-500">Recommended: 120–160 characters.</p>
            </div>
            <div>
                <label class="mb-1.5 block text-sm font-semibold text-slate-700">Open Graph Image URL</label>
                <input type="url" name="og_image"
                    value="{{ old('og_image', $appSettings['seo']['og_image']) }}"
                    placeholder="https://yourdomain.com/images/og-cover.jpg"
                    class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                <p class="mt-1 text-xs text-slate-500">Recommended: 1200×630 px. Used for social media previews.</p>
            </div>
        </div>
    </div>

    {{-- Crawling & Indexing --}}
    <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm" x-data="{ robotsOn: {{ $appSettings['seo']['robots_indexable'] ? 'true' : 'false' }}, sitemapOn: {{ $appSettings['seo']['sitemap_enabled'] ? 'true' : 'false' }}, schemaOn: {{ $appSettings['seo']['schema_enabled'] ? 'true' : 'false' }} }">
        <h2 class="text-xl font-bold text-slate-900">Crawling & Indexing</h2>
        <p class="mt-1 text-sm text-slate-500">Control how search engines crawl and index your website.</p>
        <div class="mt-6 space-y-5">
            {{-- Robots --}}
            <div class="flex items-center justify-between rounded-2xl border border-slate-200 px-4 py-4">
                <div>
                    <p class="font-semibold text-slate-800">Allow Search Engines to Index</p>
                    <p class="mt-0.5 text-xs text-slate-500">Sets <code class="font-mono">robots: index, follow</code>. Disable to hide site from search results.</p>
                </div>
                <label class="inline-flex cursor-pointer items-center gap-2">
                    <button type="button" @click="robotsOn = !robotsOn"
                        :class="robotsOn ? 'bg-accent-600' : 'bg-slate-300'"
                        class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none">
                        <span :class="robotsOn ? 'translate-x-6' : 'translate-x-1'" class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform"></span>
                    </button>
                    <input type="hidden" name="robots_indexable" :value="robotsOn ? '1' : '0'">
                </label>
            </div>
            {{-- Sitemap --}}
            <div class="flex items-center justify-between rounded-2xl border border-slate-200 px-4 py-4">
                <div>
                    <p class="font-semibold text-slate-800">Enable XML Sitemap</p>
                    <p class="mt-0.5 text-xs text-slate-500">Auto-generates <code class="font-mono">{{ config('app.url') }}/sitemap.xml</code> for crawlers.</p>
                </div>
                <label class="inline-flex cursor-pointer items-center gap-2">
                    <button type="button" @click="sitemapOn = !sitemapOn"
                        :class="sitemapOn ? 'bg-accent-600' : 'bg-slate-300'"
                        class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none">
                        <span :class="sitemapOn ? 'translate-x-6' : 'translate-x-1'" class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform"></span>
                    </button>
                    <input type="hidden" name="sitemap_enabled" :value="sitemapOn ? '1' : '0'">
                </label>
            </div>
            {{-- Schema --}}
            <div class="flex items-center justify-between rounded-2xl border border-slate-200 px-4 py-4">
                <div>
                    <p class="font-semibold text-slate-800">Structured Data (Schema.org)</p>
                    <p class="mt-0.5 text-xs text-slate-500">Injects <code class="font-mono">Organization</code> JSON-LD schema for rich results.</p>
                </div>
                <label class="inline-flex cursor-pointer items-center gap-2">
                    <button type="button" @click="schemaOn = !schemaOn"
                        :class="schemaOn ? 'bg-accent-600' : 'bg-slate-300'"
                        class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none">
                        <span :class="schemaOn ? 'translate-x-6' : 'translate-x-1'" class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform"></span>
                    </button>
                    <input type="hidden" name="schema_enabled" :value="schemaOn ? '1' : '0'">
                </label>
            </div>
        </div>
    </div>

    {{-- Sitemap & Quick Links --}}
    <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
        <h2 class="text-xl font-bold text-slate-900">Page Ranking Quick Links</h2>
        <p class="mt-1 text-sm text-slate-500">Direct links to submit your site and check indexing status.</p>
        <div class="mt-6 space-y-3">
            <a href="https://search.google.com/search-console/about" target="_blank" rel="noopener noreferrer"
               class="flex items-center justify-between rounded-2xl border border-slate-200 px-4 py-3 transition hover:border-brand-300 hover:bg-brand-50">
                <div class="flex items-center gap-3">
                    <svg class="h-5 w-5 text-blue-600" viewBox="0 0 24 24" fill="currentColor"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg>
                    <div>
                        <p class="text-sm font-semibold text-slate-800">Google Search Console</p>
                        <p class="text-xs text-slate-500">Submit sitemap, inspect pages, monitor coverage</p>
                    </div>
                </div>
                <svg class="h-4 w-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
            </a>
            <a href="https://www.bing.com/webmasters/about" target="_blank" rel="noopener noreferrer"
               class="flex items-center justify-between rounded-2xl border border-slate-200 px-4 py-3 transition hover:border-sky-300 hover:bg-sky-50">
                <div class="flex items-center gap-3">
                    <svg class="h-5 w-5 text-sky-600" viewBox="0 0 24 24" fill="currentColor"><path d="M5 3l3 1.7V15l4-2.3 4.5 2.6L12 18l-7 4V3z"/></svg>
                    <div>
                        <p class="text-sm font-semibold text-slate-800">Bing Webmaster Tools</p>
                        <p class="text-xs text-slate-500">Submit sitemap, check Bing crawl reports</p>
                    </div>
                </div>
                <svg class="h-4 w-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
            </a>
            <a href="{{ config('app.url') }}/sitemap.xml" target="_blank" rel="noopener noreferrer"
               class="flex items-center justify-between rounded-2xl border border-slate-200 px-4 py-3 transition hover:border-accent-300 hover:bg-accent-50">
                <div class="flex items-center gap-3">
                    <svg class="h-5 w-5 text-accent-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                    <div>
                        <p class="text-sm font-semibold text-slate-800">View Sitemap</p>
                        <p class="text-xs text-slate-500 font-mono">{{ config('app.url') }}/sitemap.xml</p>
                    </div>
                </div>
                <svg class="h-4 w-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
            </a>
            <a href="https://pagespeed.web.dev/" target="_blank" rel="noopener noreferrer"
               class="flex items-center justify-between rounded-2xl border border-slate-200 px-4 py-3 transition hover:border-amber-300 hover:bg-amber-50">
                <div class="flex items-center gap-3">
                    <svg class="h-5 w-5 text-amber-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                    <div>
                        <p class="text-sm font-semibold text-slate-800">PageSpeed Insights</p>
                        <p class="text-xs text-slate-500">Test page load speed and Core Web Vitals</p>
                    </div>
                </div>
                <svg class="h-4 w-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
            </a>
        </div>
        {{-- Auto-Ping Search Engines (AJAX — avoids nesting a form inside the SEO form) --}}
        <div class="mt-4 border-t border-slate-100 pt-4"
             x-data="{ pinging: false, pingResult: '' }">
            <div class="flex items-center justify-between gap-4">
                <div>
                    <p class="text-sm font-semibold text-slate-800">Auto-Ping Search Engines</p>
                    <p class="mt-0.5 text-xs text-slate-500"
                       x-text="pingResult || 'Instantly notifies Google &amp; Bing about your sitemap. Requires sitemap to be enabled.'"></p>
                </div>
                <button type="button"
                    :disabled="pinging"
                    @click="
                        pinging = true;
                        pingResult = 'Pinging…';
                        fetch('{{ route('admin.settings.seo.ping') }}', {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
                                'Accept': 'application/json'
                            }
                        })
                        .then(r => r.json())
                        .then(d => { pingResult = d.message || 'Done'; pinging = false; })
                        .catch(() => { pingResult = 'Network error — check console'; pinging = false; })
                    "
                    class="inline-flex shrink-0 items-center gap-2 rounded-2xl brand-gradient px-4 py-2.5 text-sm font-bold text-white shadow-sm transition hover:opacity-90 disabled:opacity-60">
                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
                    <span x-text="pinging ? 'Pinging…' : 'Ping Now'"></span>
                </button>
            </div>
        </div>
    </div>

</div>

<div class="mt-6 flex justify-end">
    <button type="submit" class="inline-flex items-center gap-2 rounded-2xl brand-gradient px-6 py-3 text-sm font-bold text-white shadow-md transition hover:opacity-90">
        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
        Save SEO Settings
    </button>
</div>
</form>
</div>{{-- /tab: seo --}}

</div>
</div>{{-- /tab: license --}}

</div>{{-- /x-data tab wrapper --}}
@endsection