@extends('layouts.app')

@section('title', 'Create Sales Page')

@section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="mb-6">
        <h1 class="text-2xl font-bold">Create Sales Page</h1>
    </div>

    <!-- Beginner Guide Banner -->
    <div class="mb-6 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 border border-blue-200 dark:border-blue-800 rounded-xl p-5">
        <div class="flex items-start gap-4">
            <div class="text-3xl">📚</div>
            <div class="flex-1">
                <h3 class="font-semibold text-blue-900 dark:text-blue-100 mb-1">First time creating a sales page?</h3>
                <p class="text-sm text-blue-700 dark:text-blue-300 mb-3">
                    Don't worry! Follow our guide to set up your sales page easily.
                </p>
                <div class="flex flex-wrap gap-2">
                    <a href="{{ asset('docs/SALES-PAGE-SETUP-GUIDE.md') }}" target="_blank"
                       class="inline-flex items-center gap-1 px-3 py-1.5 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors">
                        📖 Read Full Guide (BM)
                    </a>
                    <button type="button" onclick="document.getElementById('quick-guide').classList.toggle('hidden')"
                            class="inline-flex items-center gap-1 px-3 py-1.5 bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-300 text-sm rounded-lg border border-blue-300 dark:border-blue-600 hover:bg-blue-50 dark:hover:bg-gray-600 transition-colors">
                        💡 Quick Tips
                    </button>
                </div>
            </div>
        </div>

        <!-- Collapsible Quick Guide -->
        <div id="quick-guide" class="hidden mt-4 pt-4 border-t border-blue-200 dark:border-blue-700">
            <h4 class="font-medium text-blue-900 dark:text-blue-100 mb-3">🚀 3 Easy Steps:</h4>
            <div class="grid gap-3 text-sm">
                <div class="flex items-start gap-3 bg-white dark:bg-gray-800 p-3 rounded-lg">
                    <span class="flex-shrink-0 w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-xs font-bold">1</span>
                    <div>
                        <strong class="text-gray-900 dark:text-gray-100">Upload images to free CDN</strong>
                        <p class="text-gray-600 dark:text-gray-400">Use <a href="https://imgbb.com" target="_blank" class="text-blue-600 underline">imgbb.com</a> — upload image, copy link</p>
                    </div>
                </div>
                <div class="flex items-start gap-3 bg-white dark:bg-gray-800 p-3 rounded-lg">
                    <span class="flex-shrink-0 w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-xs font-bold">2</span>
                    <div>
                        <strong class="text-gray-900 dark:text-gray-100">Copy HTML template</strong>
                        <p class="text-gray-600 dark:text-gray-400">Scroll down, click a template button, paste into Page Content</p>
                    </div>
                </div>
                <div class="flex items-start gap-3 bg-white dark:bg-gray-800 p-3 rounded-lg">
                    <span class="flex-shrink-0 w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-xs font-bold">3</span>
                    <div>
                        <strong class="text-gray-900 dark:text-gray-100">Replace text & image links</strong>
                        <p class="text-gray-600 dark:text-gray-400">Change "LINK_GAMBAR" with imgbb link, edit text with your product info</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <form action="{{ route('settings.sales-pages.store') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 space-y-6">

            <!-- Basic Info -->
            <div>
                <h2 class="text-lg font-semibold mb-4">Basic Information</h2>

                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium mb-1">Page Name *</label>
                        <input type="text" name="name" value="{{ old('name') }}" required
                               class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-700">
                        @error('name')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium mb-1">Meta Description (SEO)</label>
                        <textarea name="meta_description" rows="2" maxlength="160"
                                  placeholder="Short description for search engines (max 160 characters)"
                                  class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-700">{{ old('meta_description') }}</textarea>
                        <p class="text-xs text-gray-500 mt-1">Helps improve search engine visibility</p>
                        @error('meta_description')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium mb-1">URL Slug (optional - auto-generated if empty)</label>
                        <div class="flex">
                            <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">
                                /p/{{ auth()->user()->getUrlSlug() }}/
                            </span>
                            <input type="text" name="slug" value="{{ old('slug') }}"
                                   class="flex-1 rounded-r-md border-gray-300 dark:border-gray-600 dark:bg-gray-700">
                        </div>
                        @error('slug')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium mb-1">Logo (optional)</label>
                        <input type="file" name="logo" accept="image/*"
                               class="w-full">
                        @error('logo')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror

                        <div class="mt-3">
                            <label class="flex items-center gap-2">
                                <input type="checkbox" name="show_logo" value="1"
                                       class="rounded">
                                <span class="text-sm">Show logo on sales page</span>
                            </label>
                            <p class="text-xs text-gray-500 mt-1">Check to display logo at top of sales page (you can also add it in your HTML content instead)</p>
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium mb-1">Favicon (optional)</label>
                        <p class="text-xs text-gray-500 mb-2">Browser tab icon (recommended: 32x32px or 64x64px)</p>

                        <div class="mb-3">
                            <label class="flex items-center gap-2">
                                <input type="checkbox" name="use_logo_as_favicon" value="1" checked
                                       class="rounded">
                                <span class="text-sm">Use logo as favicon</span>
                            </label>
                        </div>

                        <input type="file" name="favicon" accept="image/*" class="w-full">
                        <p class="text-xs text-gray-500 mt-1">Upload custom favicon (leave empty to use logo)</p>
                        @error('favicon')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium mb-1">Primary Color</label>
                        <input type="color" name="primary_color" value="{{ old('primary_color', '#3B82F6') }}"
                               class="h-10">
                    </div>
                </div>
            </div>

            <!-- HTML Content -->
            <div>
                <h2 class="text-lg font-semibold mb-4">Page Content (HTML)</h2>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Paste your HTML content with images, text, etc.</p>

                <!-- Template Selector -->
                <div class="mb-4 p-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg">
                    <h4 class="font-medium text-amber-900 dark:text-amber-100 mb-3 flex items-center gap-2">
                        <span>📋</span> Ready-to-use Templates
                    </h4>
                    <div class="flex flex-wrap gap-2 mb-3">
                        <button type="button" onclick="insertTemplate('basic')"
                                class="px-3 py-1.5 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 text-sm rounded-lg border-2 border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/30 transition-colors">
                            📄 Basic
                        </button>
                        <button type="button" onclick="insertTemplate('beauty')"
                                class="px-3 py-1.5 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 text-sm rounded-lg border-2 border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/30 transition-colors">
                            🧴 Beauty
                        </button>
                        <button type="button" onclick="insertTemplate('health')"
                                class="px-3 py-1.5 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 text-sm rounded-lg border-2 border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/30 transition-colors">
                            🌿 Health
                        </button>
                        <button type="button" onclick="insertTemplate('fashion')"
                                class="px-3 py-1.5 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 text-sm rounded-lg border-2 border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/30 transition-colors">
                            👗 Fashion
                        </button>
                    </div>
                    <p class="text-xs text-amber-700 dark:text-amber-300">
                        💡 Click template → Edit text & replace <code class="bg-amber-200 dark:bg-amber-800 px-1 rounded">LINK_GAMBAR</code> with image link from <a href="https://imgbb.com" target="_blank" class="underline">imgbb.com</a>
                    </p>
                </div>

                <textarea name="html_content" id="html-content" rows="18"
                          class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-700 font-mono text-sm"
                          placeholder="Click a template above or write your own HTML...">{{ old('html_content') }}</textarea>
                @error('html_content')
                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                @enderror

                <!-- Image Upload Helper -->
                <div class="mt-3 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                    <h5 class="font-medium text-sm text-gray-900 dark:text-gray-100 mb-2">🖼️ How to Get Image Links:</h5>
                    <ol class="text-xs text-gray-600 dark:text-gray-400 space-y-1 ml-4 list-decimal">
                        <li>Open <a href="https://imgbb.com" target="_blank" class="text-blue-600 underline">imgbb.com</a></li>
                        <li>Click "Start Uploading" → select your image</li>
                        <li>After upload, click "Embed codes"</li>
                        <li>Select "Direct links" → Copy the link ending with .jpg/.png</li>
                        <li>Paste the link in template (replace LINK_GAMBAR)</li>
                    </ol>
                </div>
            </div>

            <!-- Legal / Marketing Content -->
            <div>
                <h2 class="text-lg font-semibold mb-4">Legal / Marketing / Permission (HTML) - Optional</h2>
                <p class="text-sm text-gray-600 mb-2">This section appears above the footer for legal notices, marketing consent, tracking permission, etc.</p>
                <textarea name="legal_content" rows="8"
                          class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-700 font-mono text-sm"
                          placeholder="<p>By submitting this form, you agree to our <a href='#'>Terms & Conditions</a> and <a href='#'>Privacy Policy</a>.</p>">{{ old('legal_content') }}</textarea>
                @error('legal_content')
                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- FAQ Section -->
            <div>
                <h2 class="text-lg font-semibold mb-4">FAQ Section - Optional</h2>
                <p class="text-sm text-gray-600 mb-4">Add frequently asked questions with accordion-style answers (supports HTML)</p>

                <div id="faq-container" class="space-y-4">
                    <!-- FAQ items will be added here dynamically -->
                </div>

                <button type="button" id="add-faq" class="mt-3 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
                    + Add FAQ
                </button>
            </div>

            <!-- Order Bump / Upsell Offer -->
            <div>
                <h2 class="text-lg font-semibold mb-4">Order Bump / Upsell Offer - Optional</h2>
                <p class="text-sm text-gray-600 mb-4">Add a special offer that shows when customers select a product</p>

                <div class="space-y-4">
                    <!-- Enable Order Bump -->
                    <div>
                        <label class="flex items-center gap-2">
                            <input type="checkbox" name="order_bump_enabled" value="1" id="order-bump-toggle"
                                   {{ old('order_bump_enabled') ? 'checked' : '' }}
                                   class="rounded">
                            <span class="text-sm font-medium">Enable Order Bump</span>
                        </label>
                    </div>

                    <!-- Order Bump Settings (hidden by default) -->
                    <div id="order-bump-settings" class="space-y-4 {{ old('order_bump_enabled') ? '' : 'hidden' }}">

                        <!-- Product Selection -->
                        <div>
                            <label class="block text-sm font-medium mb-1">Order Bump Product *</label>
                            @if($products->count() > 0)
                                <select name="order_bump_product_id"
                                        class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-700">
                                    <option value="">-- Select Product --</option>
                                    @foreach($products as $product)
                                        <option value="{{ $product->id }}"
                                                {{ old('order_bump_product_id') == $product->id ? 'selected' : '' }}>
                                            {{ $product->name }} - RM {{ number_format($product->price, 2) }}
                                        </option>
                                    @endforeach
                                </select>
                            @else
                                <p class="text-sm text-gray-500">No products available. Create products first.</p>
                            @endif
                            <p class="text-xs text-gray-500 mt-1">This product will be offered as an add-on</p>
                            @error('order_bump_product_id')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Offer Text -->
                        <div>
                            <label class="block text-sm font-medium mb-1">Offer Text *</label>
                            <textarea name="order_bump_text" rows="2"
                                      placeholder="e.g., Add RM80 get 3 Booster Serum - Special Offer!"
                                      class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-700">{{ old('order_bump_text') }}</textarea>
                            <p class="text-xs text-gray-500 mt-1">Compelling text to encourage customers to add this product</p>
                            @error('order_bump_text')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Styling Options -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <!-- Background Color -->
                            <div>
                                <label class="block text-sm font-medium mb-1">Background Color</label>
                                <input type="color" name="order_bump_bg_color" value="{{ old('order_bump_bg_color', '#fef3c7') }}"
                                       class="h-10 w-full">
                            </div>

                            <!-- Text Color -->
                            <div>
                                <label class="block text-sm font-medium mb-1">Text Color</label>
                                <input type="color" name="order_bump_text_color" value="{{ old('order_bump_text_color', '#78350f') }}"
                                       class="h-10 w-full">
                            </div>

                            <!-- Border Style -->
                            <div>
                                <label class="block text-sm font-medium mb-1">Border Style</label>
                                <select name="order_bump_border_style"
                                        class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-700">
                                    <option value="solid" {{ old('order_bump_border_style', 'dashed') == 'solid' ? 'selected' : '' }}>Solid</option>
                                    <option value="dashed" {{ old('order_bump_border_style', 'dashed') == 'dashed' ? 'selected' : '' }}>Dashed</option>
                                    <option value="dotted" {{ old('order_bump_border_style', 'dashed') == 'dotted' ? 'selected' : '' }}>Dotted</option>
                                </select>
                            </div>

                            <!-- Border Color -->
                            <div>
                                <label class="block text-sm font-medium mb-1">Border Color</label>
                                <input type="color" name="order_bump_border_color" value="{{ old('order_bump_border_color', '#f59e0b') }}"
                                       class="h-10 w-full">
                            </div>
                        </div>

                        <!-- Live Preview -->
                        <div>
                            <label class="block text-sm font-medium mb-2">Preview:</label>
                            <div id="order-bump-preview"
                                 class="p-4 rounded-lg"
                                 style="background-color: {{ old('order_bump_bg_color', '#fef3c7') }};
                                        color: {{ old('order_bump_text_color', '#78350f') }};
                                        border: 2px {{ old('order_bump_border_style', 'dashed') }} {{ old('order_bump_border_color', '#f59e0b') }};">
                                <div class="flex items-start gap-3">
                                    <input type="checkbox" class="mt-1 w-5 h-5 rounded" disabled>
                                    <div class="flex-1">
                                        <div id="preview-text" class="font-bold text-base mb-1">
                                            {{ old('order_bump_text') ?: 'Add RM80 get 3 Booster Serum - Special Offer!' }}
                                        </div>
                                        <div class="text-sm opacity-90">
                                            Product name and price will appear here
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Products to Sell -->
            <div class="pb-8 border-b border-gray-200 dark:border-gray-700">
                <h2 class="text-xl font-semibold mb-6 text-gray-900 dark:text-gray-100">Products to Sell</h2>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Select which products will be available on this sales page</p>

                @if($products->count() > 0)
                    <div class="space-y-2 max-h-64 overflow-y-auto border border-gray-300 dark:border-gray-600 rounded-xl p-4 bg-gray-50 dark:bg-gray-700/30">
                        @foreach($products as $product)
                            <label class="flex items-center gap-3 p-3 hover:bg-white dark:hover:bg-gray-700 rounded-lg transition-colors cursor-pointer">
                                <input type="checkbox" name="available_products[]" value="{{ $product->id }}"
                                       {{ in_array($product->id, old('available_products', [])) ? 'checked' : '' }}
                                       class="w-5 h-5 rounded text-blue-600 focus:ring-2 focus:ring-blue-500">
                                <div class="flex-1">
                                    <div class="font-medium text-gray-900 dark:text-gray-100">{{ $product->name }}</div>
                                    <div class="text-sm text-gray-500 dark:text-gray-400">RM {{ number_format($product->price, 2) }}</div>
                                </div>
                            </label>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-8 bg-gray-50 dark:bg-gray-700/30 rounded-xl border border-gray-300 dark:border-gray-600">
                        <svg class="w-12 h-12 mx-auto text-gray-400 dark:text-gray-500 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
                        </svg>
                        <p class="text-gray-600 dark:text-gray-400 mb-2">No products available. Create products first.</p>
                        <a href="{{ route('products.create') }}" class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                            </svg>
                            Create Product
                        </a>
                    </div>
                @endif

                @error('available_products')
                    <p class="text-red-500 text-xs mt-2">{{ $message }}</p>
                @enderror
            </div>

            <!-- Tracking Pixels -->
            <div class="pb-8 border-b border-gray-200 dark:border-gray-700">
                <h2 class="text-xl font-semibold mb-6 text-gray-900 dark:text-gray-100">Tracking & Analytics Pixels</h2>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-6">Track conversions and visitor behavior with tracking pixels</p>

                <div class="space-y-6">
                    <!-- Facebook Pixel -->
                    <div class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 p-5 rounded-xl border border-blue-200 dark:border-blue-800">
                        <div class="flex items-center gap-3 mb-3">
                            <div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
                                <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                                </svg>
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100">Facebook Pixel ID</label>
                                <p class="text-xs text-gray-600 dark:text-gray-400">Track Facebook ad conversions</p>
                            </div>
                        </div>
                        <input type="text" name="facebook_pixel_id" value="{{ old('facebook_pixel_id') }}"
                               placeholder="123456789012345"
                               class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all">
                    </div>

                    <!-- Google Analytics -->
                    <div class="bg-gradient-to-r from-orange-50 to-red-50 dark:from-orange-900/20 dark:to-red-900/20 p-5 rounded-xl border border-orange-200 dark:border-orange-800">
                        <div class="flex items-center gap-3 mb-3">
                            <div class="w-10 h-10 bg-orange-600 rounded-lg flex items-center justify-center">
                                <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M22.84 2.998v17.999a1.002 1.002 0 01-1.002 1.002h-5.687a.502.502 0 01-.502-.502V12.35H9.352v9.147a.502.502 0 01-.502.502H3.162a1.002 1.002 0 01-1.002-1.002V2.998a1.002 1.002 0 011.002-1.002h5.688a.502.502 0 01.502.502v9.148h6.297V2.498a.502.502 0 01.502-.502h5.687a1.002 1.002 0 011.002 1.002z"/>
                                </svg>
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100">Google Analytics ID</label>
                                <p class="text-xs text-gray-600 dark:text-gray-400">Track visitor behavior and traffic sources</p>
                            </div>
                        </div>
                        <input type="text" name="google_analytics_id" value="{{ old('google_analytics_id') }}"
                               placeholder="G-XXXXXXXXXX or UA-XXXXXXXXX-X"
                               class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-orange-500 focus:border-transparent transition-all">
                    </div>

                    <!-- TikTok Pixel -->
                    <div class="bg-gradient-to-r from-gray-50 to-slate-50 dark:from-gray-900/20 dark:to-slate-900/20 p-5 rounded-xl border border-gray-300 dark:border-gray-700">
                        <div class="flex items-center gap-3 mb-3">
                            <div class="w-10 h-10 bg-gray-900 dark:bg-gray-700 rounded-lg flex items-center justify-center">
                                <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-5.2 1.74 2.89 2.89 0 012.31-4.64 2.93 2.93 0 01.88.13V9.4a6.84 6.84 0 00-1-.05A6.33 6.33 0 005 20.1a6.34 6.34 0 0010.86-4.43v-7a8.16 8.16 0 004.77 1.52v-3.4a4.85 4.85 0 01-1-.1z"/>
                                </svg>
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100">TikTok Pixel ID</label>
                                <p class="text-xs text-gray-600 dark:text-gray-400">Track TikTok ad performance</p>
                            </div>
                        </div>
                        <input type="text" name="tiktok_pixel_id" value="{{ old('tiktok_pixel_id') }}"
                               placeholder="XXXXXXXXXXXXXX"
                               class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-gray-500 focus:border-transparent transition-all">
                    </div>
                </div>
            </div>

            <!-- Actions -->
            <div class="flex gap-4">
                <button type="submit"
                        class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                    Create Sales Page
                </button>
                <a href="{{ route('settings.sales-pages.index') }}"
                   class="px-6 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400">
                    Cancel
                </a>
            </div>
        </div>
    </form>
</div>

<script>
// FAQ Management
let faqIndex = 0;

document.getElementById('add-faq').addEventListener('click', function() {
    const container = document.getElementById('faq-container');
    const faqItem = document.createElement('div');
    faqItem.className = 'faq-item border border-gray-300 dark:border-gray-600 rounded-lg p-4';
    faqItem.innerHTML = `
        <div class="flex justify-between items-start mb-3">
            <h4 class="font-medium text-sm">FAQ #${faqIndex + 1}</h4>
            <button type="button" class="remove-faq text-red-600 hover:text-red-800 text-sm">
                Remove
            </button>
        </div>
        <div class="space-y-3">
            <div>
                <label class="block text-sm font-medium mb-1">Question</label>
                <input type="text" name="faq_items[${faqIndex}][question]"
                       placeholder="e.g., How do I consume this product?"
                       class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-700">
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">Answer (HTML supported)</label>
                <textarea name="faq_items[${faqIndex}][answer]" rows="3"
                          placeholder="<p>You can consume 1-2 sachets daily...</p>"
                          class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-700 font-mono text-sm"></textarea>
            </div>
        </div>
    `;
    container.appendChild(faqItem);
    faqIndex++;
});

// Event delegation for removing FAQ items
document.getElementById('faq-container').addEventListener('click', function(e) {
    if (e.target.classList.contains('remove-faq')) {
        e.target.closest('.faq-item').remove();
    }
});

// Order Bump Toggle
const orderBumpToggle = document.getElementById('order-bump-toggle');
const orderBumpSettings = document.getElementById('order-bump-settings');

if (orderBumpToggle) {
    orderBumpToggle.addEventListener('change', function() {
        if (this.checked) {
            orderBumpSettings.classList.remove('hidden');
        } else {
            orderBumpSettings.classList.add('hidden');
        }
    });
}

// Order Bump Live Preview Updates
function updateOrderBumpPreview() {
    const preview = document.getElementById('order-bump-preview');
    const previewText = document.getElementById('preview-text');

    if (!preview || !previewText) return;

    const bgColor = document.querySelector('input[name="order_bump_bg_color"]').value;
    const textColor = document.querySelector('input[name="order_bump_text_color"]').value;
    const borderStyle = document.querySelector('select[name="order_bump_border_style"]').value;
    const borderColor = document.querySelector('input[name="order_bump_border_color"]').value;
    const text = document.querySelector('textarea[name="order_bump_text"]').value;

    preview.style.backgroundColor = bgColor;
    preview.style.color = textColor;
    preview.style.border = `2px ${borderStyle} ${borderColor}`;
    previewText.textContent = text || 'Add RM80 get 3 Booster Serum - Special Offer!';
}

// Attach event listeners for live preview
const bgColorInput = document.querySelector('input[name="order_bump_bg_color"]');
const textColorInput = document.querySelector('input[name="order_bump_text_color"]');
const borderStyleSelect = document.querySelector('select[name="order_bump_border_style"]');
const borderColorInput = document.querySelector('input[name="order_bump_border_color"]');
const offerTextArea = document.querySelector('textarea[name="order_bump_text"]');

if (bgColorInput) bgColorInput.addEventListener('input', updateOrderBumpPreview);
if (textColorInput) textColorInput.addEventListener('input', updateOrderBumpPreview);
if (borderStyleSelect) borderStyleSelect.addEventListener('change', updateOrderBumpPreview);
if (borderColorInput) borderColorInput.addEventListener('input', updateOrderBumpPreview);
if (offerTextArea) offerTextArea.addEventListener('input', updateOrderBumpPreview);

// HTML Templates for Sales Page
const templates = {
    basic: `<!-- BANNER UTAMA -->
<img src="LINK_GAMBAR_BANNER" style="width:100%; border-radius:10px;">

<!-- TAJUK PRODUK -->
<h1 style="text-align:center; color:#333; margin-top:20px;">
    NAMA PRODUK ANDA
</h1>

<!-- TAGLINE -->
<p style="text-align:center; font-size:18px; color:#666;">
    Tagline menarik produk anda di sini
</p>

<hr style="margin:30px 0;">

<!-- KELEBIHAN PRODUK -->
<h2 style="color:#333;">Kelebihan Produk:</h2>
<ul style="font-size:16px; line-height:2;">
    <li>Kelebihan pertama produk anda</li>
    <li>Kelebihan kedua produk anda</li>
    <li>Kelebihan ketiga produk anda</li>
</ul>

<!-- GAMBAR PRODUK -->
<img src="LINK_GAMBAR_PRODUK" style="width:100%; margin:20px 0; border-radius:10px;">

<!-- TESTIMONI -->
<h2 style="color:#333;">Apa Kata Pelanggan:</h2>
<div style="background:#f5f5f5; padding:15px; border-radius:10px; margin:10px 0;">
    <p><strong>Nama Pelanggan</strong></p>
    <p>"Testimoni pelanggan di sini..."</p>
</div>

<!-- CTA -->
<div style="text-align:center; margin-top:30px; padding:20px; background:#fff3cd; border-radius:10px;">
    <h2 style="color:#856404;">ORDER SEKARANG!</h2>
    <p style="font-size:18px;">Stok terhad - Jangan lepaskan!</p>
</div>`,

    beauty: `<!-- HERO -->
<div style="text-align:center; padding:20px;">
    <h1 style="color:#d63384; font-size:28px;">NAMA PRODUK KECANTIKAN</h1>
    <p style="color:#666; font-size:16px;">Rahsia kulit cantik berseri!</p>
</div>

<!-- GAMBAR PRODUK -->
<img src="LINK_GAMBAR_PRODUK" style="width:100%; border-radius:15px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">

<!-- MASALAH -->
<div style="background:#ffebee; padding:20px; border-radius:10px; margin:20px 0;">
    <h2 style="color:#c62828;">Masalah Yang Anda Hadapi:</h2>
    <ul style="line-height:2;">
        <li>Kulit kusam dan tak berseri</li>
        <li>Jerawat yang degil</li>
        <li>Pori-pori besar</li>
    </ul>
</div>

<!-- PENYELESAIAN -->
<div style="background:#e8f5e9; padding:20px; border-radius:10px; margin:20px 0;">
    <h2 style="color:#2e7d32;">Penyelesaian:</h2>
    <ul style="line-height:2;">
        <li>Kulit lebih cerah dalam 7 hari</li>
        <li>Jerawat berkurangan</li>
        <li>Pori-pori lebih kecil</li>
    </ul>
</div>

<!-- KANDUNGAN -->
<h2 style="text-align:center; color:#333;">Kandungan Premium:</h2>
<div style="display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:20px 0;">
    <span style="background:#e3f2fd; padding:10px 20px; border-radius:20px;">Vitamin C</span>
    <span style="background:#e3f2fd; padding:10px 20px; border-radius:20px;">Hyaluronic Acid</span>
    <span style="background:#e3f2fd; padding:10px 20px; border-radius:20px;">Niacinamide</span>
</div>

<!-- BEFORE AFTER -->
<h2 style="text-align:center;">Before & After:</h2>
<img src="LINK_GAMBAR_BEFORE_AFTER" style="width:100%; border-radius:10px; margin:10px 0;">

<!-- HARGA -->
<div style="text-align:center; background:linear-gradient(135deg, #667eea 0%, #764ba2 100%); color:white; padding:30px; border-radius:15px; margin:20px 0;">
    <p style="font-size:14px; margin:0;">Harga Asal: <s>RM XXX</s></p>
    <h2 style="font-size:36px; margin:10px 0;">RM XX SAHAJA!</h2>
    <p style="font-size:14px; margin:0;">Promosi terhad!</p>
</div>`,

    health: `<!-- HERO -->
<div style="background:linear-gradient(135deg, #11998e 0%, #38ef7d 100%); color:white; padding:30px; text-align:center; border-radius:15px;">
    <h1 style="font-size:26px; margin-bottom:10px;">NAMA PRODUK KESIHATAN</h1>
    <p style="font-size:16px; opacity:0.9;">100% Natural | Halal | KKM Approved</p>
</div>

<!-- GAMBAR PRODUK -->
<img src="LINK_GAMBAR_PRODUK" style="width:100%; margin:20px 0; border-radius:15px;">

<!-- KEBAIKAN -->
<h2 style="text-align:center; color:#2e7d32;">Kebaikan Produk:</h2>
<div style="display:grid; gap:15px; margin:20px 0;">
    <div style="background:#f1f8e9; padding:15px; border-radius:10px; border-left:4px solid #4caf50;">
        <strong>Tingkatkan Tenaga</strong>
        <p style="margin:5px 0 0 0; color:#666;">Rasa lebih bertenaga sepanjang hari</p>
    </div>
    <div style="background:#f1f8e9; padding:15px; border-radius:10px; border-left:4px solid #4caf50;">
        <strong>Kuatkan Imuniti</strong>
        <p style="margin:5px 0 0 0; color:#666;">Sistem imun lebih kuat</p>
    </div>
    <div style="background:#f1f8e9; padding:15px; border-radius:10px; border-left:4px solid #4caf50;">
        <strong>Tidur Lebih Nyenyak</strong>
        <p style="margin:5px 0 0 0; color:#666;">Kualiti tidur yang lebih baik</p>
    </div>
</div>

<!-- CARA GUNA -->
<div style="background:#fff8e1; padding:20px; border-radius:10px; margin:20px 0;">
    <h3 style="color:#f57c00;">Cara Penggunaan:</h3>
    <ol style="line-height:2;">
        <li>Ambil 1-2 sachet sehari</li>
        <li>Campurkan dengan air suam</li>
        <li>Minum sebelum/selepas makan</li>
    </ol>
</div>

<!-- SIJIL -->
<div style="text-align:center; margin:20px 0;">
    <img src="LINK_GAMBAR_SIJIL" style="max-width:300px;">
    <p style="color:#666; font-size:14px;">Lulus KKM | Sijil Halal JAKIM</p>
</div>

<!-- TESTIMONI -->
<h2 style="text-align:center;">Testimoni Pelanggan:</h2>
<img src="LINK_GAMBAR_TESTIMONI" style="width:100%; border-radius:10px; margin:10px 0;">`,

    fashion: `<!-- HEADER -->
<div style="text-align:center; padding:20px;">
    <h1 style="font-family:serif; font-size:32px; color:#333;">NAMA PRODUK</h1>
    <p style="color:#888; letter-spacing:2px;">EXCLUSIVE COLLECTION</p>
</div>

<!-- GAMBAR MODEL -->
<img src="LINK_GAMBAR_MODEL" style="width:100%; border-radius:10px;">

<!-- WARNA -->
<h3 style="text-align:center; margin-top:20px;">Pilihan Warna:</h3>
<div style="display:flex; justify-content:center; gap:15px; margin:15px 0;">
    <div style="text-align:center;">
        <div style="width:40px; height:40px; background:#000; border-radius:50%; margin:0 auto;"></div>
        <small>Hitam</small>
    </div>
    <div style="text-align:center;">
        <div style="width:40px; height:40px; background:#fff; border:1px solid #ddd; border-radius:50%; margin:0 auto;"></div>
        <small>Putih</small>
    </div>
    <div style="text-align:center;">
        <div style="width:40px; height:40px; background:#c2185b; border-radius:50%; margin:0 auto;"></div>
        <small>Merah</small>
    </div>
</div>

<!-- SIZE CHART -->
<h3 style="text-align:center;">Carta Saiz:</h3>
<table style="width:100%; border-collapse:collapse; margin:15px 0; font-size:14px;">
    <tr style="background:#f5f5f5;">
        <th style="border:1px solid #ddd; padding:10px;">Saiz</th>
        <th style="border:1px solid #ddd; padding:10px;">Dada</th>
        <th style="border:1px solid #ddd; padding:10px;">Pinggang</th>
    </tr>
    <tr>
        <td style="border:1px solid #ddd; padding:10px; text-align:center;">S</td>
        <td style="border:1px solid #ddd; padding:10px; text-align:center;">34"</td>
        <td style="border:1px solid #ddd; padding:10px; text-align:center;">28"</td>
    </tr>
    <tr>
        <td style="border:1px solid #ddd; padding:10px; text-align:center;">M</td>
        <td style="border:1px solid #ddd; padding:10px; text-align:center;">36"</td>
        <td style="border:1px solid #ddd; padding:10px; text-align:center;">30"</td>
    </tr>
    <tr>
        <td style="border:1px solid #ddd; padding:10px; text-align:center;">L</td>
        <td style="border:1px solid #ddd; padding:10px; text-align:center;">38"</td>
        <td style="border:1px solid #ddd; padding:10px; text-align:center;">32"</td>
    </tr>
</table>

<!-- MATERIAL -->
<div style="background:#fafafa; padding:15px; border-radius:10px; margin:20px 0;">
    <h3 style="margin-top:0;">Material & Kualiti:</h3>
    <ul style="line-height:2;">
        <li>Material: Cotton Premium 100%</li>
        <li>Tidak jarang / tidak mudah koyak</li>
        <li>Selesa dipakai seharian</li>
    </ul>
</div>

<!-- GAMBAR DETAIL -->
<h3 style="text-align:center;">Detail Produk:</h3>
<img src="LINK_GAMBAR_DETAIL" style="width:100%; border-radius:8px; margin-top:10px;">`
};

function insertTemplate(type) {
    const textarea = document.getElementById('html-content');
    if (textarea.value.trim() !== '') {
        if (!confirm('This will replace existing content. Continue?')) {
            return;
        }
    }
    textarea.value = templates[type];
    textarea.focus();
    // Scroll to textarea
    textarea.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
</script>
@endsection