@extends('admin.layouts.app')

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

@push('styles')
<script src="https://cdn.tiny.cloud/1/{{ config('services.tinymce.api_key', 'no-api-key') }}/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
@endpush

@section('content')
<div class="max-w-6xl mx-auto">
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-800">General Settings</h1>
        <p class="text-sm text-gray-500 mt-1">Manage site info, branding, API credentials, messaging providers, and AI tools.</p>
    </div>

    @if($errors->any())
        <div class="mb-4 rounded-lg bg-red-100 border border-red-300 text-red-700 px-4 py-3 text-sm">
            <ul class="list-disc list-inside space-y-1">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('admin.settings.general.update') }}" method="POST" enctype="multipart/form-data" class="space-y-4">
        @csrf

        <div class="bg-white rounded-xl border border-gray-200 p-2 flex flex-wrap gap-2 sticky top-2 z-20">
            <button type="button" data-settings-tab="site" class="px-3 py-2 rounded-lg text-sm font-semibold bg-blue-600 text-white">Site</button>
            <button type="button" data-settings-tab="theme" class="px-3 py-2 rounded-lg text-sm font-semibold text-gray-600 hover:bg-gray-100">Theme</button>
            <button type="button" data-settings-tab="api" class="px-3 py-2 rounded-lg text-sm font-semibold text-gray-600 hover:bg-gray-100">API</button>
            <button type="button" data-settings-tab="sms" class="px-3 py-2 rounded-lg text-sm font-semibold text-gray-600 hover:bg-gray-100">SMS</button>
            <button type="button" data-settings-tab="email-provider" class="px-3 py-2 rounded-lg text-sm font-semibold text-gray-600 hover:bg-gray-100">Email Provider</button>
            <button type="button" data-settings-tab="email-templates" class="px-3 py-2 rounded-lg text-sm font-semibold text-gray-600 hover:bg-gray-100">Email Templates</button>
            <button type="button" data-settings-tab="ai" class="px-3 py-2 rounded-lg text-sm font-semibold text-gray-600 hover:bg-gray-100">AI</button>
            <button type="button" data-settings-tab="security" class="px-3 py-2 rounded-lg text-sm font-semibold text-gray-600 hover:bg-gray-100">Security</button>
        </div>

        <details class="bg-white rounded-xl border border-gray-200 p-5" open data-settings-panel="site">
            <summary class="font-semibold cursor-pointer">Site Information & Branding</summary>
            @php
                $siteLogoRaw = $settings['site']['logo'] ?? '';
                $siteLogoPreview = $siteLogoRaw
                    ? ((str_starts_with($siteLogoRaw, 'http://') || str_starts_with($siteLogoRaw, 'https://'))
                        ? $siteLogoRaw
                        : asset('storage/' . ltrim($siteLogoRaw, '/')))
                    : '';
                $faviconRaw = $settings['site']['favicon'] ?? '';
                $faviconPreview = $faviconRaw
                    ? ((str_starts_with($faviconRaw, 'http://') || str_starts_with($faviconRaw, 'https://'))
                        ? $faviconRaw
                        : asset('storage/' . ltrim($faviconRaw, '/')))
                    : '';
            @endphp
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                <div><label class="text-sm font-medium">Site Name</label><input name="site_name" value="{{ old('site_name', $settings['site']['name'] ?? '') }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">Tagline</label><input name="site_tagline" value="{{ old('site_tagline', $settings['site']['tagline'] ?? '') }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">Phone</label><input name="site_phone" value="{{ old('site_phone', $settings['site']['phone'] ?? '') }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">WhatsApp Number</label><input name="site_whatsapp" value="{{ old('site_whatsapp', $settings['site']['whatsapp_number'] ?? '') }}" class="w-full mt-1 rounded border-gray-300" placeholder="+8801XXXXXXXXX"></div>
                <div><label class="text-sm font-medium">Email</label><input name="site_email" value="{{ old('site_email', $settings['site']['email'] ?? '') }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2"><label class="text-sm font-medium">Address</label><input name="site_address" value="{{ old('site_address', $settings['site']['address'] ?? '') }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2">
                    <label class="text-sm font-medium">Footer About Message</label>
                    <textarea name="site_about_message" rows="3" class="w-full mt-1 rounded border-gray-300">{{ old('site_about_message', $settings['site']['about_message'] ?? '') }}</textarea>
                </div>
                @php
                    $oldSocialLabels = old('site_social_label');
                    $oldSocialUrls = old('site_social_url');
                    $savedSocialLinks = $settings['site']['social_links'] ?? [];
                    $socialRows = [];
                    if (is_array($oldSocialLabels) || is_array($oldSocialUrls)) {
                        $maxRows = max(count($oldSocialLabels ?? []), count($oldSocialUrls ?? []));
                        for ($i = 0; $i < $maxRows; $i++) {
                            $socialRows[] = [
                                'label' => trim((string) (($oldSocialLabels[$i] ?? ''))),
                                'url' => trim((string) (($oldSocialUrls[$i] ?? ''))),
                            ];
                        }
                    } else {
                        foreach ($savedSocialLinks as $link) {
                            $socialRows[] = [
                                'label' => trim((string) ($link['label'] ?? '')),
                                'url' => trim((string) ($link['url'] ?? '')),
                            ];
                        }
                    }
                    if (empty($socialRows)) {
                        $socialRows[] = ['label' => 'Facebook', 'url' => 'https://facebook.com'];
                    }
                @endphp
                <div class="md:col-span-2 border border-gray-200 rounded-xl p-4 bg-gray-50">
                    <div class="flex items-center justify-between gap-3">
                        <label class="text-sm font-semibold text-gray-700">Top Header Social Links</label>
                        <button type="button" id="add-social-link" class="inline-flex items-center gap-1 rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-blue-700">
                            <span>+</span>
                            <span>Add Social</span>
                        </button>
                    </div>
                    <p class="text-xs text-gray-500 mt-1">Admin can add/remove social icons from top header.</p>
                    <div id="social-links-wrap" class="mt-3 space-y-2">
                        @foreach($socialRows as $row)
                            <div class="social-link-row grid grid-cols-1 md:grid-cols-12 gap-2">
                                <div class="md:col-span-4">
                                    <input type="text" name="site_social_label[]" value="{{ $row['label'] }}" placeholder="Label (e.g. Facebook)" class="w-full rounded border-gray-300 text-sm">
                                </div>
                                <div class="md:col-span-7">
                                    <input type="url" name="site_social_url[]" value="{{ $row['url'] }}" placeholder="https://example.com/profile" class="w-full rounded border-gray-300 text-sm">
                                </div>
                                <div class="md:col-span-1">
                                    <button type="button" class="remove-social-link w-full rounded border border-red-200 bg-red-50 px-2 py-2 text-xs font-semibold text-red-600 hover:bg-red-100">Delete</button>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <template id="social-link-template">
                        <div class="social-link-row grid grid-cols-1 md:grid-cols-12 gap-2">
                            <div class="md:col-span-4">
                                <input type="text" name="site_social_label[]" placeholder="Label (e.g. Facebook)" class="w-full rounded border-gray-300 text-sm">
                            </div>
                            <div class="md:col-span-7">
                                <input type="url" name="site_social_url[]" placeholder="https://example.com/profile" class="w-full rounded border-gray-300 text-sm">
                            </div>
                            <div class="md:col-span-1">
                                <button type="button" class="remove-social-link w-full rounded border border-red-200 bg-red-50 px-2 py-2 text-xs font-semibold text-red-600 hover:bg-red-100">Delete</button>
                            </div>
                        </div>
                    </template>
                </div>

                <div>
                    <label class="text-sm font-medium">Site Logo</label>
                    <input type="file" name="site_logo" class="w-full mt-1 text-sm">
                    @if($siteLogoPreview)
                        <img src="{{ $siteLogoPreview }}" alt="Site logo" class="mt-2 h-14 rounded border border-gray-200 bg-white p-1">
                    @endif
                    @if($siteLogoRaw)<p class="text-xs text-gray-500 mt-1 break-all">Current: {{ $siteLogoRaw }}</p>@endif
                </div>
                <div>
                    <label class="text-sm font-medium">Favicon</label>
                    <input type="file" name="site_favicon" class="w-full mt-1 text-sm">
                    @if($faviconPreview)
                        <img src="{{ $faviconPreview }}" alt="Favicon" class="mt-2 h-12 w-12 rounded border border-gray-200 bg-white p-1 object-contain">
                    @endif
                    @if($faviconRaw)<p class="text-xs text-gray-500 mt-1 break-all">Current: {{ $faviconRaw }}</p>@endif
                </div>
            </div>
        </details>

        <details class="bg-white rounded-xl border border-gray-200 p-5" open data-settings-panel="theme">
            <summary class="font-semibold cursor-pointer">Theme Colors</summary>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                <div>
                    <label class="text-sm font-medium">Primary Color</label>
                    <input type="color" name="theme_primary" value="{{ old('theme_primary', $settings['theme']['primary'] ?? '#1d4ed8') }}" class="w-full h-11 mt-1 rounded border-gray-300">
                </div>
                <div>
                    <label class="text-sm font-medium">Secondary Color</label>
                    <input type="color" name="theme_secondary" value="{{ old('theme_secondary', $settings['theme']['secondary'] ?? '#0f172a') }}" class="w-full h-11 mt-1 rounded border-gray-300">
                </div>
                <div>
                    <label class="text-sm font-medium">Highlight Text Color</label>
                    <input type="color" name="theme_accent" value="{{ old('theme_accent', $settings['theme']['accent'] ?? '#e1252b') }}" class="w-full h-11 mt-1 rounded border-gray-300">
                </div>
                <div>
                    <label class="text-sm font-medium">Admin Sidebar Color</label>
                    <input type="color" name="theme_admin_sidebar" value="{{ old('theme_admin_sidebar', $settings['theme']['admin_sidebar'] ?? '#1e3a8a') }}" class="w-full h-11 mt-1 rounded border-gray-300">
                </div>
                <div>
                    <label class="text-sm font-medium">Page Head Gradient From</label>
                    <input type="color" name="theme_head_gradient_from" value="{{ old('theme_head_gradient_from', $settings['theme']['head_gradient_from'] ?? '#1e3a8a') }}" class="w-full h-11 mt-1 rounded border-gray-300">
                </div>
                <div>
                    <label class="text-sm font-medium">Page Head Gradient To</label>
                    <input type="color" name="theme_head_gradient_to" value="{{ old('theme_head_gradient_to', $settings['theme']['head_gradient_to'] ?? '#0f172a') }}" class="w-full h-11 mt-1 rounded border-gray-300">
                </div>
                <p class="md:col-span-2 text-xs text-gray-500">These colors are applied globally across admin panel and public website components.</p>
            </div>
        </details>

        <details class="bg-white rounded-xl border border-gray-200 p-5" open data-settings-panel="api">
            <summary class="font-semibold cursor-pointer">Admin Path & API</summary>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                <div>
                    <label class="text-sm font-medium">Admin Path (.env)</label>
                    <input value="/{{ trim(env('ADMIN_PATH', 'admin'), '/') }}" class="w-full mt-1 rounded border-gray-300 bg-gray-50" readonly>
                    <p class="text-xs text-gray-500 mt-1">Set <code>ADMIN_PATH=your-custom-path</code> in <code>.env</code>, then run <code>php artisan optimize:clear</code>.</p>
                </div>
                <div>
                    <label class="text-sm font-medium">Site Info API Endpoint</label>
                    <input value="{{ url('/api/site-info') }}" class="w-full mt-1 rounded border-gray-300 bg-gray-50" readonly>
                    <p class="text-xs text-gray-500 mt-1">Returns public site name, logo, favicon, and contact info.</p>
                </div>
                <div class="md:col-span-2">
                    <label class="text-sm font-medium">TinyMCE API Key (.env)</label>
                    <input value="{{ config('services.tinymce.api_key', 'no-api-key') }}" class="w-full mt-1 rounded border-gray-300 bg-gray-50" readonly>
                    <p class="text-xs text-gray-500 mt-1">Set <code>TINYMCE_API_KEY=your-key</code> in <code>.env</code>, then run <code>php artisan optimize:clear</code>.</p>
                </div>
            </div>
        </details>

        <details class="bg-white rounded-xl border border-gray-200 p-5" open data-settings-panel="sms">
            <summary class="font-semibold cursor-pointer">SMS Provider (BulkSMSBD)</summary>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                <div>
                    <label class="text-sm font-medium">Provider</label>
                    <select name="sms_provider" class="w-full mt-1 rounded border-gray-300">
                        <option value="bulksmsbd" @selected(($settings['sms']['provider'] ?? '') === 'bulksmsbd')>BulkSMSBD</option>
                    </select>
                </div>
                <div><label class="text-sm font-medium">Sender ID</label><input name="bulksmsbd_sender_id" value="{{ old('bulksmsbd_sender_id', $settings['sms']['bulksmsbd_sender_id'] ?? 'GPS') }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2"><label class="text-sm font-medium">BulkSMSBD API Key</label><input name="bulksmsbd_api_key" value="{{ old('bulksmsbd_api_key', $settings['sms']['bulksmsbd_api_key'] ?? '') }}" class="w-full mt-1 rounded border-gray-300" placeholder="API key"></div>
            </div>
        </details>

        <details class="bg-white rounded-xl border border-gray-200 p-5" open data-settings-panel="email-provider">
            <summary class="font-semibold cursor-pointer">Email Provider (SMTP / Resend)</summary>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                <div>
                    <label class="text-sm font-medium">Email Provider</label>
                    <select name="email_provider" class="w-full mt-1 rounded border-gray-300">
                        <option value="smtp" @selected(($settings['email']['provider'] ?? '') === 'smtp')>SMTP</option>
                        <option value="resend" @selected(($settings['email']['provider'] ?? '') === 'resend')>Resend API</option>
                    </select>
                </div>
                <div><label class="text-sm font-medium">From Name</label><input name="from_name" value="{{ old('from_name', $settings['email']['from_name'] ?? '') }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">From Email</label><input name="from_email" value="{{ old('from_email', $settings['email']['from_email'] ?? '') }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">SMTP Host</label><input name="smtp_host" value="{{ old('smtp_host', $settings['email']['smtp_host'] ?? '') }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">SMTP Port</label><input name="smtp_port" value="{{ old('smtp_port', $settings['email']['smtp_port'] ?? 587) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">SMTP Encryption</label><input name="smtp_encryption" value="{{ old('smtp_encryption', $settings['email']['smtp_encryption'] ?? 'tls') }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">SMTP Username</label><input name="smtp_username" value="{{ old('smtp_username', $settings['email']['smtp_username'] ?? '') }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">SMTP Password</label><input name="smtp_password" value="{{ old('smtp_password', $settings['email']['smtp_password'] ?? '') }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2"><label class="text-sm font-medium">Resend API Key</label><input name="resend_api_key" value="{{ old('resend_api_key', $settings['email']['resend_api_key'] ?? '') }}" class="w-full mt-1 rounded border-gray-300"></div>
            </div>
        </details>

        <details class="bg-white rounded-xl border border-gray-200 p-5" open data-settings-panel="email-templates">
            <summary class="font-semibold cursor-pointer">Email Templates</summary>
            @php
                $emailLogoPath = ($settings['email_templates']['logo'] ?? '') ?: ($settings['site']['logo'] ?? '');
                $emailLogoUrl = $emailLogoPath ? asset('storage/' . ltrim($emailLogoPath, '/')) : '';
            @endphp
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                <div class="md:col-span-2">
                    <label class="text-sm font-medium">Email Template Logo</label>
                    <input type="file" name="email_template_logo" accept=".png,.jpg,.jpeg,.webp,.svg" class="w-full mt-1 text-sm">
                    <p class="text-xs text-gray-500 mt-1">This logo appears in all outgoing email templates. If empty, site logo is used.</p>
                    @if($emailLogoUrl)
                        <div class="mt-2 inline-flex items-center gap-3 border border-gray-200 rounded-lg px-3 py-2 bg-gray-50">
                            <img src="{{ $emailLogoUrl }}" alt="Email Logo" class="h-8 w-auto">
                            <span class="text-xs text-gray-600">Current logo</span>
                        </div>
                    @endif
                    <div id="email-template-logo-meta" data-current-logo="{{ $emailLogoUrl }}" class="hidden"></div>
                </div>
                <div>
                    <label class="text-sm font-medium">Contact Admin Subject</label>
                    <input name="contact_admin_subject" value="{{ old('contact_admin_subject', $settings['email_templates']['contact_admin_subject'] ?? '') }}" class="w-full mt-1 rounded border-gray-300">
                </div>
                <div>
                    <label class="text-sm font-medium">Contact User Subject</label>
                    <input name="contact_user_subject" value="{{ old('contact_user_subject', $settings['email_templates']['contact_user_subject'] ?? '') }}" class="w-full mt-1 rounded border-gray-300">
                </div>
                <div class="md:col-span-2">
                    <label class="text-sm font-medium">Contact Admin Body (HTML)</label>
                    <textarea id="contact_admin_body" name="contact_admin_body" rows="4" class="email-template-editor w-full mt-1 rounded border-gray-300">{{ old('contact_admin_body', $settings['email_templates']['contact_admin_body'] ?? '') }}</textarea>
                </div>
                <div class="md:col-span-2">
                    <label class="text-sm font-medium">Contact User Body (HTML)</label>
                    <textarea id="contact_user_body" name="contact_user_body" rows="4" class="email-template-editor w-full mt-1 rounded border-gray-300">{{ old('contact_user_body', $settings['email_templates']['contact_user_body'] ?? '') }}</textarea>
                </div>
                <div>
                    <label class="text-sm font-medium">Lead Assigned Subject</label>
                    <input name="lead_assigned_subject" value="{{ old('lead_assigned_subject', $settings['email_templates']['lead_assigned_subject'] ?? '') }}" class="w-full mt-1 rounded border-gray-300">
                </div>
                <div>
                    <label class="text-sm font-medium">Lead Status (Admin) Subject</label>
                    <input name="lead_status_admin_subject" value="{{ old('lead_status_admin_subject', $settings['email_templates']['lead_status_admin_subject'] ?? '') }}" class="w-full mt-1 rounded border-gray-300">
                </div>
                <div class="md:col-span-2">
                    <label class="text-sm font-medium">Lead Assigned Body (HTML)</label>
                    <textarea id="lead_assigned_body" name="lead_assigned_body" rows="4" class="email-template-editor w-full mt-1 rounded border-gray-300">{{ old('lead_assigned_body', $settings['email_templates']['lead_assigned_body'] ?? '') }}</textarea>
                </div>
                <div class="md:col-span-2">
                    <label class="text-sm font-medium">Lead Status (Admin) Body (HTML)</label>
                    <textarea id="lead_status_admin_body" name="lead_status_admin_body" rows="4" class="email-template-editor w-full mt-1 rounded border-gray-300">{{ old('lead_status_admin_body', $settings['email_templates']['lead_status_admin_body'] ?? '') }}</textarea>
                </div>
                <div>
                    <label class="text-sm font-medium">OTP Subject</label>
                    <input name="otp_subject" value="{{ old('otp_subject', $settings['email_templates']['otp_subject'] ?? '') }}" class="w-full mt-1 rounded border-gray-300">
                </div>
                <div class="md:col-span-2">
                    <label class="text-sm font-medium">OTP Body (HTML)</label>
                    <textarea id="otp_body" name="otp_body" rows="3" class="email-template-editor w-full mt-1 rounded border-gray-300">{{ old('otp_body', $settings['email_templates']['otp_body'] ?? '') }}</textarea>
                </div>
                <p class="md:col-span-2 text-xs text-gray-500">
                    Available placeholders:
                    <code>&#123;&#123;name&#125;&#125;</code>,
                    <code>&#123;&#123;email&#125;&#125;</code>,
                    <code>&#123;&#123;phone&#125;&#125;</code>,
                    <code>&#123;&#123;site_name&#125;&#125;</code>,
                    <code>&#123;&#123;action_url&#125;&#125;</code>,
                    <code>&#123;&#123;lead_id&#125;&#125;</code>,
                    <code>&#123;&#123;lead_label&#125;&#125;</code>,
                    <code>&#123;&#123;actor_name&#125;&#125;</code>,
                    <code>&#123;&#123;old_status&#125;&#125;</code>,
                    <code>&#123;&#123;new_status&#125;&#125;</code>,
                    <code>&#123;&#123;otp&#125;&#125;</code>.
                </p>

                <div class="md:col-span-2 border border-gray-200 rounded-xl p-4 bg-gray-50">
                    <div class="flex flex-wrap items-center justify-between gap-3 mb-3">
                        <h4 class="text-sm font-semibold text-gray-800">Live Preview</h4>
                        <select id="email-template-preview-select" class="rounded border-gray-300 text-sm">
                            <option value="contact_admin">Contact Admin</option>
                            <option value="contact_user">Contact User</option>
                            <option value="lead_assigned">Lead Assigned</option>
                            <option value="lead_status_admin">Lead Status (Admin)</option>
                            <option value="otp">OTP</option>
                        </select>
                    </div>
                    <div class="bg-white border border-gray-200 rounded-lg p-4">
                        <p class="text-xs text-gray-500 mb-1">Subject</p>
                        <p id="email-preview-subject" class="text-sm font-semibold text-gray-900"></p>
                        <hr class="my-3">
                        <p class="text-xs text-gray-500 mb-1">Rendered Email</p>
                        <div id="email-preview-body" class="text-sm text-gray-700 leading-relaxed"></div>
                    </div>
                </div>
                <p class="md:col-span-2 text-xs text-gray-500">Email style/template fixed (company standard). Admin will edit subject + content only.</p>
            </div>
        </details>

        <details class="bg-white rounded-xl border border-gray-200 p-5" open data-settings-panel="ai">
            <summary class="font-semibold cursor-pointer">AI Provider (OpenAI / Gemini)</summary>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                <div>
                    <label class="text-sm font-medium">AI Provider</label>
                    <select name="ai_provider" class="w-full mt-1 rounded border-gray-300">
                        <option value="openai" @selected(($settings['ai']['provider'] ?? '') === 'openai')>OpenAI</option>
                        <option value="gemini" @selected(($settings['ai']['provider'] ?? '') === 'gemini')>Gemini</option>
                    </select>
                </div>
                <div><label class="text-sm font-medium">OpenAI Model</label><input name="openai_model" value="{{ old('openai_model', $settings['ai']['openai_model'] ?? 'gpt-4o-mini') }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2"><label class="text-sm font-medium">OpenAI API Key</label><input name="openai_api_key" value="{{ old('openai_api_key', $settings['ai']['openai_api_key'] ?? '') }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">Gemini Model</label><input name="gemini_model" value="{{ old('gemini_model', $settings['ai']['gemini_model'] ?? 'gemini-1.5-flash') }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2"><label class="text-sm font-medium">Gemini API Key</label><input name="gemini_api_key" value="{{ old('gemini_api_key', $settings['ai']['gemini_api_key'] ?? '') }}" class="w-full mt-1 rounded border-gray-300"></div>
            </div>
        </details>

        <details class="bg-white rounded-xl border border-gray-200 p-5" open data-settings-panel="security">
            <summary class="font-semibold cursor-pointer">Login Security (Admin / Employee OTP)</summary>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                <label class="inline-flex items-center gap-2 text-sm font-medium md:col-span-2">
                    <input type="checkbox" name="public_registration_enabled" value="1" @checked(old('public_registration_enabled', $settings['security']['public_registration_enabled'] ?? false))>
                    Enable public registration page (/register)
                </label>
                <label class="inline-flex items-center gap-2 text-sm font-medium">
                    <input type="checkbox" name="admin_login_otp_enabled" value="1" @checked(old('admin_login_otp_enabled', $settings['security']['admin_login_otp_enabled'] ?? true))>
                    Enable OTP for Owner/Admin login
                </label>
                <label class="inline-flex items-center gap-2 text-sm font-medium">
                    <input type="checkbox" name="employee_login_otp_enabled" value="1" @checked(old('employee_login_otp_enabled', $settings['security']['employee_login_otp_enabled'] ?? true))>
                    Enable OTP for Employee login
                </label>

                <div>
                    <label class="text-sm font-medium">OTP Channel</label>
                    <select name="login_otp_channel" class="w-full mt-1 rounded border-gray-300">
                        <option value="email" @selected(old('login_otp_channel', $settings['security']['login_otp_channel'] ?? 'email') === 'email')>Email OTP</option>
                        <option value="sms" @selected(old('login_otp_channel', $settings['security']['login_otp_channel'] ?? 'email') === 'sms')>SMS OTP (requires user phone)</option>
                    </select>
                </div>
                <div>
                    <label class="text-sm font-medium">OTP Expiry (minutes)</label>
                    <input type="number" min="2" max="30" name="login_otp_expiry_minutes" value="{{ old('login_otp_expiry_minutes', $settings['security']['login_otp_expiry_minutes'] ?? 5) }}" class="w-full mt-1 rounded border-gray-300">
                </div>
                <div>
                    <label class="text-sm font-medium">Max OTP Attempts</label>
                    <input type="number" min="3" max="10" name="login_otp_max_attempts" value="{{ old('login_otp_max_attempts', $settings['security']['login_otp_max_attempts'] ?? 5) }}" class="w-full mt-1 rounded border-gray-300">
                </div>
                <div>
                    <label class="text-sm font-medium">Resend Cooldown (seconds)</label>
                    <input type="number" min="15" max="180" name="login_otp_resend_cooldown_seconds" value="{{ old('login_otp_resend_cooldown_seconds', $settings['security']['login_otp_resend_cooldown_seconds'] ?? 30) }}" class="w-full mt-1 rounded border-gray-300">
                </div>
                <div class="md:col-span-2 text-xs text-gray-500">
                    For SMS OTP, set a phone number in Team Member profile. If phone is missing, secure login will be blocked.
                </div>
            </div>
        </details>

        <div class="sticky bottom-2 bg-white border border-gray-200 rounded-xl p-4 flex justify-end">
            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-2.5 rounded-lg">
                Save General Settings
            </button>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
(() => {
    const tabButtons = Array.from(document.querySelectorAll('[data-settings-tab]'));
    const tabPanels = Array.from(document.querySelectorAll('[data-settings-panel]'));
    let editorsInitialized = false;

    function initEmailEditors() {
        if (editorsInitialized) return;
        if (!window.tinymce) return;

        tinymce.init({
            selector: 'textarea.email-template-editor',
            menubar: true,
            height: 260,
            plugins: 'code link lists table autoresize',
            toolbar: 'undo redo | blocks | bold italic underline | forecolor backcolor | alignleft aligncenter alignright | bullist numlist | link table | code',
            content_style: "body{font-family:Inter,Arial,sans-serif;font-size:14px;line-height:1.6;padding:10px;}",
            branding: false,
            promotion: false,
            setup: function (editor) {
                editor.on('change keyup input setcontent', () => {
                    editor.save();
                    if (typeof window.__renderEmailPreview === 'function') {
                        window.__renderEmailPreview();
                    }
                });
            }
        });

        editorsInitialized = true;
    }

    function activateTab(tab) {
        tabButtons.forEach((btn) => {
            const active = btn.dataset.settingsTab === tab;
            btn.classList.toggle('bg-blue-600', active);
            btn.classList.toggle('text-white', active);
            btn.classList.toggle('text-gray-600', !active);
        });

        tabPanels.forEach((panel) => {
            const active = panel.dataset.settingsPanel === tab;
            panel.classList.toggle('hidden', !active);
            panel.open = active;
        });

        if (tab === 'email-templates') {
            initEmailEditors();
        }
    }

    tabButtons.forEach((btn) => {
        btn.addEventListener('click', () => activateTab(btn.dataset.settingsTab));
    });

    const socialWrap = document.getElementById('social-links-wrap');
    const socialTemplate = document.getElementById('social-link-template');
    const addSocialBtn = document.getElementById('add-social-link');
    const bindSocialDelete = () => {
        socialWrap?.querySelectorAll('.remove-social-link').forEach((btn) => {
            if (btn.dataset.bound === '1') return;
            btn.dataset.bound = '1';
            btn.addEventListener('click', () => {
                const rows = socialWrap.querySelectorAll('.social-link-row');
                if (rows.length <= 1) {
                    const labelInput = rows[0]?.querySelector('input[name="site_social_label[]"]');
                    const urlInput = rows[0]?.querySelector('input[name="site_social_url[]"]');
                    if (labelInput) labelInput.value = '';
                    if (urlInput) urlInput.value = '';
                    return;
                }
                btn.closest('.social-link-row')?.remove();
            });
        });
    };
    if (addSocialBtn && socialWrap && socialTemplate) {
        addSocialBtn.addEventListener('click', () => {
            const node = socialTemplate.content.firstElementChild.cloneNode(true);
            socialWrap.appendChild(node);
            bindSocialDelete();
        });
        bindSocialDelete();
    }

    activateTab('site');

    const previewSelect = document.getElementById('email-template-preview-select');
    const previewSubject = document.getElementById('email-preview-subject');
    const previewBody = document.getElementById('email-preview-body');
    if (!previewSelect || !previewSubject || !previewBody) return;

    const map = {
        contact_admin: { subject: 'contact_admin_subject', body: 'contact_admin_body' },
        contact_user: { subject: 'contact_user_subject', body: 'contact_user_body' },
        lead_assigned: { subject: 'lead_assigned_subject', body: 'lead_assigned_body' },
        lead_status_admin: { subject: 'lead_status_admin_subject', body: 'lead_status_admin_body' },
        otp: { subject: 'otp_subject', body: 'otp_body' },
    };

    const sample = {
        name: 'John Doe',
        email: 'john@example.com',
        phone: '+8801700000000',
        site_name: 'GPS Migration',
        action_url: 'https://example.com/admin/view',
        lead_id: '1245',
        lead_label: 'John Doe / +8801700000000',
        actor_name: 'Team Member',
        old_status: 'new',
        new_status: 'contacted',
        otp: '739251',
        recipient_name: 'Admin User',
        message: 'Sample message',
    };
    let previewLogoObjectUrl = null;

    function renderTemplate(content) {
        return (content || '').replace(/\{\{\s*([a-zA-Z0-9_]+)\s*\}\}/g, (_, key) => sample[key] ?? '');
    }

    function getLogoForPreview() {
        const logoInput = document.querySelector('[name="email_template_logo"]');
        const logoMeta = document.getElementById('email-template-logo-meta');
        const currentLogo = logoMeta?.dataset.currentLogo || '';

        if (logoInput && logoInput.files && logoInput.files[0]) {
            if (previewLogoObjectUrl) {
                URL.revokeObjectURL(previewLogoObjectUrl);
            }
            previewLogoObjectUrl = URL.createObjectURL(logoInput.files[0]);
            return previewLogoObjectUrl;
        }

        return currentLogo;
    }

    function wrapPreviewTemplate(subject, contentHtml) {
        const siteNameInput = document.querySelector('[name="site_name"]');
        const siteTaglineInput = document.querySelector('[name="site_tagline"]');
        const primaryInput = document.querySelector('[name="theme_primary"]');
        const secondaryInput = document.querySelector('[name="theme_secondary"]');

        const siteName = (siteNameInput?.value || 'GPS Migration').trim() || 'GPS Migration';
        const siteTagline = (siteTaglineInput?.value || 'Trusted Study Abroad Partner').trim() || 'Trusted Study Abroad Partner';
        const primary = primaryInput?.value || '#1d4ed8';
        const secondary = secondaryInput?.value || '#0f172a';
        const year = new Date().getFullYear();
        const logoUrl = getLogoForPreview();
        const logoHtml = logoUrl ? `<img src="${logoUrl}" alt="${siteName} logo" style="display:block;max-height:44px;width:auto;margin-bottom:8px;">` : '';

        return `
            <div style="background:#f3f6fb;padding:16px;border-radius:10px;">
                <div style="max-width:640px;margin:0 auto;background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;">
                    <div style="padding:16px 18px;background:linear-gradient(135deg, ${primary}, ${secondary});color:#fff;">
                        ${logoHtml}
                        <div style="font-size:18px;font-weight:700;">${siteName}</div>
                        <div style="font-size:12px;opacity:.9;margin-top:4px;">${siteTagline}</div>
                    </div>
                    <div style="padding:16px 18px;">
                        <h3 style="margin:0 0 10px;font-size:16px;color:#0f172a;">${subject || '(empty subject)'}</h3>
                        <div style="font-size:14px;line-height:1.65;color:#334155;">${contentHtml || '<em style="color:#94a3b8;">(empty body)</em>'}</div>
                    </div>
                    <div style="padding:12px 18px;border-top:1px solid #eef2f7;color:#64748b;font-size:12px;">
                        <div>This is an automated email from ${siteName}. Please do not reply directly.</div>
                        <div style="margin-top:4px;">&copy; ${year} ${siteName}. All rights reserved.</div>
                    </div>
                </div>
            </div>
        `;
    }

    function renderPreview() {
        const selected = map[previewSelect.value];
        if (!selected) return;

        const subjectInput = document.querySelector(`[name="${selected.subject}"]`);
        const bodyInput = document.querySelector(`[name="${selected.body}"]`);

        const subjectText = renderTemplate(subjectInput ? subjectInput.value : '');
        let bodyRaw = bodyInput ? bodyInput.value : '';
        if (window.tinymce && bodyInput && bodyInput.id) {
            const instance = window.tinymce.get(bodyInput.id);
            if (instance) {
                bodyRaw = instance.getContent();
            }
        }
        const bodyHtml = renderTemplate(bodyRaw);

        previewSubject.textContent = subjectText || '(empty subject)';
        previewBody.innerHTML = wrapPreviewTemplate(subjectText, bodyHtml);
    }

    window.__renderEmailPreview = renderPreview;

    Object.values(map).forEach(({ subject, body }) => {
        const subjectInput = document.querySelector(`[name="${subject}"]`);
        const bodyInput = document.querySelector(`[name="${body}"]`);
        if (subjectInput) subjectInput.addEventListener('input', renderPreview);
        if (bodyInput) bodyInput.addEventListener('input', renderPreview);
    });
    previewSelect.addEventListener('change', renderPreview);
    const logoInput = document.querySelector('[name="email_template_logo"]');
    if (logoInput) logoInput.addEventListener('change', renderPreview);
    ['site_name', 'site_tagline', 'theme_primary', 'theme_secondary'].forEach((name) => {
        const el = document.querySelector(`[name="${name}"]`);
        if (el) el.addEventListener('input', renderPreview);
    });
    renderPreview();
})();
</script>
@endpush