@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-2">{{ $isNewTheme ? 'Create New Theme' : 'Edit Theme: ' . $theme->name }}</h1>
                    <p class="text-muted">{{ $isNewTheme ? 'Design a new theme using Builder V2' : 'Update theme settings and components' }}</p>
                </div>
                <div>
                    <a href="{{ route('admin.theme-builder.index') }}" class="btn btn-secondary">
                        <i class="bi bi-arrow-left me-1"></i> Back to Themes
                    </a>
                </div>
            </div>
        </div>
    </div>

    <form id="theme-form">
        @csrf

        <!-- Theme Metadata -->
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="bi bi-info-circle me-2"></i>Theme Information</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="theme-name" class="form-label">Theme Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="theme-name" name="name" value="{{ $theme->name ?? '' }}" required>
                        <small class="text-muted">Enter a unique, descriptive name for your theme</small>
                    </div>

                    <div class="col-md-3 mb-3">
                        <label for="theme-author" class="form-label">Author</label>
                        <input type="text" class="form-control" id="theme-author" name="author" value="{{ $theme->author ?? auth()->user()->name }}">
                    </div>

                    <div class="col-md-3 mb-3">
                        <label for="theme-version" class="form-label">Version</label>
                        <input type="text" class="form-control" id="theme-version" name="version" value="{{ $theme->version ?? '1.0.0' }}" placeholder="1.0.0">
                    </div>

                    <div class="col-12 mb-3">
                        <label for="theme-description" class="form-label">Description</label>
                        <textarea class="form-control" id="theme-description" name="description" rows="3">{{ $theme->description ?? '' }}</textarea>
                        <small class="text-muted">Describe what makes this theme unique</small>
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="theme-preview-image" class="form-label">Preview Image</label>
                        <div class="mb-2">
                            <button type="button" class="btn btn-sm btn-primary w-100" onclick="document.getElementById('previewImageUpload').click()" id="uploadPreviewBtn">
                                <i class="bi bi-upload me-2"></i>Upload Image
                            </button>
                            <input type="file" id="previewImageUpload" accept="image/*" style="display: none;" onchange="uploadPreviewImage(this)">
                        </div>
                        <small class="text-muted d-block mb-2">Or enter an image URL:</small>
                        <input type="text" class="form-control" id="theme-preview-image" name="preview_image" value="{{ $theme->preview_image ?? '' }}" placeholder="https://example.com/preview.jpg or /storage/path/image.jpg">
                        @if(!empty($theme->preview_image ?? ''))
                        <div class="mt-2">
                            <img src="{{ $theme->preview_image }}" alt="Preview" class="img-thumbnail" style="max-width: 200px; max-height: 150px;">
                        </div>
                        @endif
                    </div>

                    <div class="col-md-3 mb-3">
                        <label class="form-label">Premium Theme?</label>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="theme-premium" name="is_premium" value="1" {{ ($theme->is_premium ?? false) ? 'checked' : '' }}>
                            <label class="form-check-label" for="theme-premium">Premium</label>
                        </div>
                    </div>

                    <div class="col-md-3 mb-3">
                        <label for="theme-price" class="form-label">Price (if premium)</label>
                        <input type="number" class="form-control" id="theme-price" name="price" value="{{ $theme->price ?? '' }}" step="0.01" min="0">
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Industries</label>
                        <div class="d-flex flex-wrap gap-2 mb-2">
                            @php
                                $industryOptions = ['agency', 'portfolio', 'creative', 'design', 'photography', 'startup', 'corporate', 'ecommerce', 'blog', 'restaurant', 'healthcare', 'education', 'real-estate'];
                                $selectedIndustries = $theme->industries ?? [];
                            @endphp
                            @foreach($industryOptions as $industry)
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" name="industries[]" value="{{ $industry }}" id="industry-{{ $industry }}" {{ in_array($industry, $selectedIndustries) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="industry-{{ $industry }}">
                                        {{ ucfirst($industry) }}
                                    </label>
                                </div>
                            @endforeach
                        </div>
                        <small class="text-muted">Select applicable industries</small>
                    </div>

                    <div class="col-md-6 mb-3">
                        <label class="form-label">Features</label>
                        <div class="d-flex flex-wrap gap-2 mb-2">
                            @php
                                $featureOptions = ['responsive', 'dark_mode_ready', 'animations', 'ecommerce_ready', 'builder_v2_compatible', 'rtl_support', 'seo_optimized', 'accessibility'];
                                $selectedFeatures = $theme->features ?? [];
                            @endphp
                            @foreach($featureOptions as $feature)
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" name="features[]" value="{{ $feature }}" id="feature-{{ $feature }}" {{ in_array($feature, $selectedFeatures) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="feature-{{ $feature }}">
                                        {{ ucwords(str_replace('_', ' ', $feature)) }}
                                    </label>
                                </div>
                            @endforeach
                        </div>
                        <small class="text-muted">Select theme features</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Design Data Section -->
        <div class="card mb-4">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0"><i class="bi bi-palette me-2"></i>Theme Design</h5>
            </div>
            <div class="card-body">
                @if($isNewTheme)
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle me-2"></i>
                        <strong>How to create theme components:</strong>
                        <ol class="mb-0 mt-2">
                            <li>Create pages in Builder V2 with your desired header, footer, and section designs</li>
                            <li>Return here and click "Import from Builder V2 Page"</li>
                            <li>Select the page you designed</li>
                            <li>System will extract components and save them as theme templates</li>
                        </ol>
                    </div>
                    <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#importPageModal">
                        <i class="bi bi-file-earmark-arrow-down me-1"></i> Import from Builder V2 Page
                    </button>
                @else
                    <div class="mb-3">
                        <h6>Theme Components ({{ $theme->components_count ?? 0 }})</h6>
                        @if($theme && $theme->components->count() > 0)
                            <div class="list-group">
                                @foreach($theme->components as $component)
                                    <div class="list-group-item">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <strong>{{ $component->name }}</strong>
                                                <span class="badge bg-secondary ms-2">{{ $component->type }}</span>
                                                @if($component->is_required)
                                                    <span class="badge bg-danger ms-1">Required</span>
                                                @endif
                                            </div>
                                            <div>
                                                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="editComponent({{ $component->id }})">
                                                    <i class="bi bi-pencil"></i>
                                                </button>
                                            </div>
                                        </div>
                                        @if($component->description)
                                            <small class="text-muted d-block mt-1">{{ $component->description }}</small>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <p class="text-muted">No components yet. Import from a Builder V2 page to get started.</p>
                        @endif
                    </div>
                    <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#importPageModal">
                        <i class="bi bi-file-earmark-arrow-down me-1"></i> Import Additional Components
                    </button>
                @endif

                <input type="hidden" id="design-data" name="design_data" value="{{ json_encode($theme->design_data ?? []) }}">
            </div>
        </div>

        <!-- Universal Components Section -->
        <div class="card mb-4">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0"><i class="bi bi-box-seam me-2"></i>Universal Components Library</h5>
            </div>
            <div class="card-body">
                <p class="text-muted mb-3">
                    <i class="bi bi-info-circle me-1"></i>
                    Pre-built components available for use in your theme. These are universal components that can be used across all themes.
                </p>

                @php
                    $universalComponents = \App\Models\ThemeComponent::whereNull('theme_id')
                        ->orderBy('type')
                        ->orderBy('order')
                        ->get()
                        ->groupBy('type');
                @endphp

                @if($universalComponents->count() > 0)
                    <!-- Component Tabs -->
                    <ul class="nav nav-tabs mb-3" id="componentsTab" role="tablist">
                        @foreach($universalComponents as $type => $components)
                            <li class="nav-item" role="presentation">
                                <button class="nav-link {{ $loop->first ? 'active' : '' }}"
                                        id="tab-{{ $type }}"
                                        data-bs-toggle="tab"
                                        data-bs-target="#content-{{ $type }}"
                                        type="button"
                                        role="tab">
                                    @if($type === 'ecommerce')
                                        <i class="bi bi-cart me-1"></i>E-commerce
                                    @elseif($type === 'booking')
                                        <i class="bi bi-calendar-check me-1"></i>Booking
                                    @elseif($type === 'payment')
                                        <i class="bi bi-credit-card me-1"></i>Payment
                                    @else
                                        {{ ucfirst($type) }}
                                    @endif
                                    <span class="badge bg-secondary ms-1">{{ $components->count() }}</span>
                                </button>
                            </li>
                        @endforeach
                    </ul>

                    <!-- Component Tab Content -->
                    <div class="tab-content" id="componentsTabContent">
                        @foreach($universalComponents as $type => $components)
                            <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}"
                                 id="content-{{ $type }}"
                                 role="tabpanel">
                                <div class="row g-3">
                                    @foreach($components as $component)
                                        <div class="col-md-6">
                                            <div class="card h-100 border-{{ $type === 'ecommerce' ? 'primary' : ($type === 'booking' ? 'success' : 'warning') }}">
                                                <div class="card-body">
                                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                                        <h6 class="card-title mb-0">
                                                            <i class="bi bi-puzzle me-1"></i>
                                                            {{ $component->name }}
                                                        </h6>
                                                        <span class="badge bg-{{ $type === 'ecommerce' ? 'primary' : ($type === 'booking' ? 'success' : 'warning') }}">
                                                            {{ ucfirst($type) }}
                                                        </span>
                                                    </div>

                                                    @if($component->description)
                                                        <p class="card-text text-muted small mb-3">
                                                            {{ $component->description }}
                                                        </p>
                                                    @endif

                                                    <div class="d-flex gap-2">
                                                        <button type="button"
                                                                class="btn btn-sm btn-outline-primary flex-fill"
                                                                onclick="viewComponentCode({{ $component->id }})"
                                                                data-bs-toggle="tooltip"
                                                                title="View component code">
                                                            <i class="bi bi-code-slash"></i> View Code
                                                        </button>
                                                        <button type="button"
                                                                class="btn btn-sm btn-outline-secondary"
                                                                onclick="previewComponent({{ $component->id }})"
                                                                data-bs-toggle="tooltip"
                                                                title="Preview component">
                                                            <i class="bi bi-eye"></i>
                                                        </button>
                                                    </div>

                                                    @if($component->variables && count($component->variables) > 0)
                                                        <div class="mt-2">
                                                            <small class="text-muted">
                                                                <i class="bi bi-gear me-1"></i>
                                                                {{ count($component->variables) }} customizable variables
                                                            </small>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle me-2"></i>
                        No universal components available. Run the ThemeComponentsSeeder to add pre-built E-commerce, Booking, and Payment components.
                    </div>
                @endif
            </div>
        </div>

        <!-- Presets Section -->
        <div class="card mb-4">
            <div class="card-header bg-warning">
                <h5 class="mb-0"><i class="bi bi-brush me-2"></i>Color & Font Presets</h5>
            </div>
            <div class="card-body">
                @if(!$isNewTheme && $theme && $theme->presets->count() > 0)
                    <div id="presets-list" class="mb-3">
                        @foreach($theme->presets as $preset)
                            <div class="card mb-2" data-preset-id="{{ $preset->id }}">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div>
                                            <h6 class="mb-1">
                                                {{ $preset->name }}
                                                @if($preset->is_default)
                                                    <span class="badge bg-success">Default</span>
                                                @endif
                                            </h6>
                                            @if($preset->description)
                                                <p class="text-muted small mb-2">{{ $preset->description }}</p>
                                            @endif
                                            @if($preset->color_scheme)
                                            <div class="d-flex gap-2 mb-2">
                                                @foreach($preset->color_scheme as $key => $color)
                                                    @php
                                                        $colorValue = is_array($color) ? ($color['default'] ?? $color[0] ?? '#cccccc') : $color;
                                                    @endphp
                                                    <div title="{{ ucfirst($key) }}: {{ $colorValue }}">
                                                        <div style="width: 30px; height: 30px; background-color: {{ $colorValue }}; border: 1px solid #ddd; border-radius: 4px;"></div>
                                                        <small class="d-block text-muted text-center">{{ ucfirst($key) }}</small>
                                                    </div>
                                                @endforeach
                                            </div>
                                            @endif
                                            @if($preset->font_scheme)
                                            <small class="text-muted">
                                                @php
                                                    $headingFont = $preset->font_scheme['heading'] ?? 'Default';
                                                    $bodyFont = $preset->font_scheme['body'] ?? 'Default';
                                                    $headingFont = is_array($headingFont) ? ($headingFont['default'] ?? 'Default') : $headingFont;
                                                    $bodyFont = is_array($bodyFont) ? ($bodyFont['default'] ?? 'Default') : $bodyFont;
                                                @endphp
                                                Fonts: {{ $headingFont }} (heading), {{ $bodyFont }} (body)
                                            </small>
                                            @endif
                                        </div>
                                        <div>
                                            <button type="button" class="btn btn-sm btn-outline-primary me-1" onclick="editPreset({{ $preset->id }})">
                                                <i class="bi bi-pencil"></i>
                                            </button>
                                            <button type="button" class="btn btn-sm btn-outline-danger" onclick="deletePreset({{ $preset->id }})" {{ $preset->is_default && $theme->presets->count() === 1 ? 'disabled' : '' }}>
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif

                <button type="button" class="btn btn-outline-success" onclick="openNewPresetModal()">
                    <i class="bi bi-plus-circle me-1"></i> {{ $isNewTheme ? 'Create Preset' : 'Add New Preset' }}
                </button>

                @if($isNewTheme)
                    <p class="text-muted mt-2 mb-0">
                        <i class="bi bi-info-circle me-1"></i>
                        Create at least one preset with colors and fonts for your theme
                    </p>
                @endif

                <input type="hidden" id="presets-data" name="presets" value="{{ json_encode($theme->presets ?? []) }}">
            </div>
        </div>

        <!-- Theme Pages Section -->
        <div class="card mb-4">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0"><i class="bi bi-file-earmark-text me-2"></i>Theme Pages</h5>
            </div>
            <div class="card-body">
                @if(!$isNewTheme && $theme && $theme->pages->count() > 0)
                    <div id="pages-list" class="mb-3">
                        @foreach($theme->pages->sortBy('order') as $page)
                            <div class="card mb-2" data-page-id="{{ $page->id }}">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div class="flex-grow-1">
                                            <h6 class="mb-1">
                                                {{ $page->title }}
                                                <span class="badge bg-secondary ms-2">{{ $page->getPageTypeLabel() }}</span>
                                                @if($page->page_type === 'home')
                                                    <span class="badge bg-success ms-1"><i class="bi bi-house-fill"></i> Home Page</span>
                                                @endif
                                                @if(in_array($page->page_type, ['header', 'footer']))
                                                    <span class="badge bg-info ms-1"><i class="bi bi-layout-text-window"></i> Global Section</span>
                                                @endif
                                                @if($page->is_required)
                                                    <span class="badge bg-danger ms-1">Required</span>
                                                @endif
                                                @if(!$page->is_published)
                                                    <span class="badge bg-warning text-dark ms-1">Draft</span>
                                                @endif
                                            </h6>
                                            <div class="small text-muted">
                                                @if(in_array($page->page_type, ['header', 'footer']))
                                                    <i class="bi bi-globe"></i> Appears on all pages
                                                @else
                                                    <i class="bi bi-link-45deg"></i> {{ $page->slug }}
                                                @endif
                                            </div>
                                            @if($page->description)
                                                <p class="text-muted small mb-0 mt-1">{{ $page->description }}</p>
                                            @endif
                                        </div>
                                        <div class="btn-group">
                                            @if($page->page_type !== 'home' && !in_array($page->page_type, ['header', 'footer']))
                                            <button type="button" class="btn btn-sm btn-outline-success" onclick="setAsHomePage({{ $page->id }})" title="Set as Home Page">
                                                <i class="bi bi-house"></i>
                                            </button>
                                            @endif
                                            <a href="{{ route('admin.theme-builder.pages.builder-v2', [$theme->id, $page->id]) }}" class="btn btn-sm btn-outline-primary" title="Edit in Builder V2">
                                                <i class="bi bi-pencil"></i>
                                            </a>
                                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="editPageSettings({{ $page->id }})" title="Page Settings">
                                                <i class="bi bi-gear"></i>
                                            </button>
                                            <button type="button" class="btn btn-sm btn-outline-danger" onclick="deletePage({{ $page->id }})" title="Delete Page">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle me-2"></i>
                        <strong>No pages yet!</strong> Add complete page templates that will be auto-created when users install this theme.
                        <br><small class="mt-1 d-block">Pages are like WordPress/Shopify themes - users get ready-made pages (Home, About, Contact, etc.) that they can customize.</small>
                    </div>
                @endif

                <button type="button" class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#pageModal" {{ $isNewTheme ? 'disabled' : '' }}>
                    <i class="bi bi-plus-circle me-1"></i> Add New Page
                </button>

                @if($isNewTheme)
                    <p class="text-muted mt-2 mb-0">
                        <i class="bi bi-info-circle me-1"></i>
                        Save your theme first, then you can add pre-designed pages
                    </p>
                @endif
            </div>
        </div>

        <!-- Version History Section -->
        @if(!$isNewTheme && $theme)
        <div class="card mb-4">
            <div class="card-header bg-dark text-white">
                <h5 class="mb-0"><i class="bi bi-clock-history me-2"></i>Version History</h5>
            </div>
            <div class="card-body">
                @if($theme->versions->count() > 0)
                    <div id="versions-list" class="mb-3">
                        @foreach($theme->versions()->latest()->take(5)->get() as $version)
                            <div class="d-flex justify-content-between align-items-center mb-2 pb-2 border-bottom">
                                <div>
                                    <strong>v{{ $version->version }}</strong>
                                    @if($version->is_published)
                                        <span class="badge bg-success ms-2">Published</span>
                                    @else
                                        <span class="badge bg-secondary ms-2">Draft</span>
                                    @endif
                                    <div class="small text-muted">
                                        {{ $version->created_at->format('M d, Y H:i') }}
                                        @if($version->creator)
                                            by {{ $version->creator->name }}
                                        @endif
                                    </div>
                                    @if($version->changelog)
                                        <div class="small mt-1">{{ $version->changelog }}</div>
                                    @endif
                                </div>
                                <div>
                                    @if(!$version->is_published)
                                        <button type="button" class="btn btn-sm btn-outline-success" onclick="publishVersion({{ $version->id }})">
                                            Publish
                                        </button>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <p class="text-muted mb-0">No version history yet. Create a version to track changes.</p>
                @endif

                <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#versionModal">
                    <i class="bi bi-plus-circle me-1"></i> Create New Version
                </button>

                <p class="text-muted mt-2 mb-0">
                    <i class="bi bi-info-circle me-1"></i>
                    Creating versions helps track changes and allows users to see what's new in theme updates
                </p>
            </div>
        </div>
        @endif

        <!-- Actions -->
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        @if(!$isNewTheme)
                            <button type="button" class="btn btn-outline-danger" onclick="deleteTheme()">
                                <i class="bi bi-trash me-1"></i> Delete Theme
                            </button>
                        @endif
                    </div>
                    <div>
                        <a href="{{ route('admin.theme-builder.index') }}" class="btn btn-secondary me-2">Cancel</a>
                        <button type="submit" class="btn btn-primary" id="save-theme-btn">
                            <i class="bi bi-floppy me-1"></i> {{ $isNewTheme ? 'Create Theme' : 'Update Theme' }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- Import Page Modal -->
<div class="modal fade" id="importPageModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Import from Builder V2 Page</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted">Select a page built with Builder V2 to extract its components</p>
                <div class="mb-3">
                    <label class="form-label">Select Website</label>
                    <select class="form-select" id="import-website-select">
                        <option value="">Choose a website...</option>
                        <!-- Websites will be loaded dynamically -->
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">Select Page</label>
                    <select class="form-select" id="import-page-select" disabled>
                        <option value="">Choose a page...</option>
                        <!-- Pages will be loaded dynamically -->
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="import-page-btn" disabled>Import Components</button>
            </div>
        </div>
    </div>
</div>

<!-- Preset Modal -->
<div class="modal fade" id="presetModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="presetModalTitle">Create Preset</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="preset-id">

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Preset Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="preset-name" required>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Industry (optional)</label>
                        <select class="form-select" id="preset-industry">
                            <option value="">None</option>
                            <option value="agency">Agency</option>
                            <option value="corporate">Corporate</option>
                            <option value="creative">Creative</option>
                            <option value="ecommerce">E-commerce</option>
                            <option value="portfolio">Portfolio</option>
                        </select>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Description</label>
                    <textarea class="form-control" id="preset-description" rows="2"></textarea>
                </div>

                <h6 class="mt-4 mb-3">Color Scheme</h6>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Primary Color</label>
                        <input type="color" class="form-control form-control-color" id="preset-color-primary" value="#667eea">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Secondary Color</label>
                        <input type="color" class="form-control form-control-color" id="preset-color-secondary" value="#764ba2">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label">Accent Color</label>
                        <input type="color" class="form-control form-control-color" id="preset-color-accent" value="#f093fb">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label">Dark Color</label>
                        <input type="color" class="form-control form-control-color" id="preset-color-dark" value="#1a1a1a">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label">Light Color</label>
                        <input type="color" class="form-control form-control-color" id="preset-color-light" value="#f8f9fa">
                    </div>
                </div>

                <h6 class="mt-4 mb-3">Font Scheme</h6>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Heading Font</label>
                        <select class="form-select" id="preset-font-heading" style="font-family: var(--heading-font, inherit);">
                            <option value="Default">Default</option>
                            <option value="Roboto">Roboto</option>
                            <option value="Open Sans">Open Sans</option>
                            <option value="Lato">Lato</option>
                            <option value="Montserrat">Montserrat</option>
                            <option value="Oswald">Oswald</option>
                            <option value="Raleway">Raleway</option>
                            <option value="Poppins">Poppins</option>
                            <option value="Ubuntu">Ubuntu</option>
                            <option value="Merriweather">Merriweather</option>
                            <option value="Playfair Display">Playfair Display</option>
                            <option value="Nunito">Nunito</option>
                            <option value="PT Sans">PT Sans</option>
                            <option value="Roboto Condensed">Roboto Condensed</option>
                            <option value="Source Sans Pro">Source Sans Pro</option>
                            <option value="Lora">Lora</option>
                            <option value="Noto Sans">Noto Sans</option>
                            <option value="Quicksand">Quicksand</option>
                            <option value="Inter">Inter</option>
                            <option value="Work Sans">Work Sans</option>
                            <option value="Crimson Text">Crimson Text</option>
                            <option value="Bebas Neue">Bebas Neue</option>
                            <option value="Anton">Anton</option>
                            <option value="Dancing Script">Dancing Script</option>
                            <option value="Pacifico">Pacifico</option>
                            <option value="Indie Flower">Indie Flower</option>
                            <option value="Lobster">Lobster</option>
                            <option value="Righteous">Righteous</option>
                            <option value="Permanent Marker">Permanent Marker</option>
                            <option value="Bangers">Bangers</option>
                        </select>
                        <small class="text-muted d-block mt-1">Powered by Google Fonts</small>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Body Font</label>
                        <select class="form-select" id="preset-font-body" style="font-family: var(--body-font, inherit);">
                            <option value="Default">Default</option>
                            <option value="Roboto">Roboto</option>
                            <option value="Open Sans">Open Sans</option>
                            <option value="Lato">Lato</option>
                            <option value="Montserrat">Montserrat</option>
                            <option value="Oswald">Oswald</option>
                            <option value="Raleway">Raleway</option>
                            <option value="Poppins">Poppins</option>
                            <option value="Ubuntu">Ubuntu</option>
                            <option value="Merriweather">Merriweather</option>
                            <option value="Playfair Display">Playfair Display</option>
                            <option value="Nunito">Nunito</option>
                            <option value="PT Sans">PT Sans</option>
                            <option value="Roboto Condensed">Roboto Condensed</option>
                            <option value="Source Sans Pro">Source Sans Pro</option>
                            <option value="Lora">Lora</option>
                            <option value="Noto Sans">Noto Sans</option>
                            <option value="Quicksand">Quicksand</option>
                            <option value="Inter">Inter</option>
                            <option value="Work Sans">Work Sans</option>
                            <option value="Crimson Text">Crimson Text</option>
                            <option value="Bebas Neue">Bebas Neue</option>
                            <option value="Anton">Anton</option>
                            <option value="Dancing Script">Dancing Script</option>
                            <option value="Pacifico">Pacifico</option>
                            <option value="Indie Flower">Indie Flower</option>
                            <option value="Lobster">Lobster</option>
                            <option value="Righteous">Righteous</option>
                            <option value="Permanent Marker">Permanent Marker</option>
                            <option value="Bangers">Bangers</option>
                        </select>
                        <small class="text-muted d-block mt-1">Powered by Google Fonts</small>
                    </div>
                </div>

                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="preset-is-default">
                    <label class="form-check-label" for="preset-is-default">
                        Set as default preset
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="save-preset-btn">Save Preset</button>
            </div>
        </div>
    </div>
</div>

<!-- Page Modal -->
<div class="modal fade" id="pageModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New Page Template</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">
                    <i class="bi bi-info-circle me-2"></i>
                    <strong>How it works:</strong> Create a page template here, then design it in Builder V2. When users install your theme, these pages will be auto-created on their website.
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Page Type <span class="text-danger">*</span></label>
                        <select class="form-select" id="page-type" required onchange="updatePageSlug()">
                            <option value="">Select page type...</option>

                            <optgroup label="Regular Pages">
                                @foreach(\App\Models\ThemePage::getPageTypes() as $type => $label)
                                    <option value="{{ $type }}">{{ $label }}</option>
                                @endforeach
                            </optgroup>

                            <optgroup label="Dynamic Templates (Post, Product, etc.)">
                                @foreach(\App\Models\ThemePage::getTemplatePageTypes() as $type => $label)
                                    <option value="{{ $type }}">{{ $label }}</option>
                                @endforeach
                            </optgroup>
                        </select>
                        <small class="text-muted">Templates use dynamic data injection for posts, products, bookings, etc.</small>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Title <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="page-title" required onkeyup="updatePageSlug()">
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Slug <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="page-slug" required>
                    <small class="text-muted">URL-friendly version of the title (e.g., about-us)</small>
                </div>

                <div class="mb-3">
                    <label class="form-label">Description</label>
                    <textarea class="form-control" id="page-description" rows="2" placeholder="Brief description of this page"></textarea>
                </div>

                <div class="form-check mb-3">
                    <input class="form-check-input" type="checkbox" id="page-is-required">
                    <label class="form-check-label" for="page-is-required">
                        Required page (must be created during theme installation)
                    </label>
                </div>

                <div class="mb-3">
                    <label class="form-label">Order</label>
                    <input type="number" class="form-control" id="page-order" value="0" min="0">
                    <small class="text-muted">Display order (lower numbers appear first)</small>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="create-page-btn">Create Page & Design in Builder</button>
            </div>
        </div>
    </div>
</div>

<!-- Version Modal -->
<div class="modal fade" id="versionModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Create New Version</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">Version Number <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="version-number" placeholder="e.g., 1.1.0" required>
                    <small class="text-muted">Current version: {{ $theme->version ?? '1.0.0' }}</small>
                </div>

                <div class="mb-3">
                    <label class="form-label">Changelog</label>
                    <textarea class="form-control" id="version-changelog" rows="4" placeholder="What changed in this version?&#10;- Added new contact page&#10;- Updated header design&#10;- Fixed mobile responsiveness"></textarea>
                </div>

                <div class="alert alert-warning">
                    <i class="bi bi-exclamation-triangle me-2"></i>
                    This will create a snapshot of the current theme including all components, pages, and presets.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="create-version-btn">Create Version</button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Load Google Font dynamically
function loadGoogleFont(fontFamily) {
    if (fontFamily !== 'Default') {
        const fontId = 'google-font-' + fontFamily.replace(/\s+/g, '-');
        const existingLink = document.getElementById(fontId);

        if (!existingLink) {
            const link = document.createElement('link');
            link.id = fontId;
            link.href = `https://fonts.googleapis.com/css2?family=${fontFamily.replace(/\s+/g, '+')}:wght@100;200;300;400;500;600;700;800;900&display=swap`;
            link.rel = 'stylesheet';
            document.head.appendChild(link);
        }
    }
}

// Initialize font dropdowns with previews
document.addEventListener('DOMContentLoaded', function() {
    const headingSelect = document.getElementById('preset-font-heading');
    const bodySelect = document.getElementById('preset-font-body');

    // Load initial fonts
    if (headingSelect.value && headingSelect.value !== 'Default') {
        loadGoogleFont(headingSelect.value);
    }
    if (bodySelect.value && bodySelect.value !== 'Default') {
        loadGoogleFont(bodySelect.value);
    }

    // Add change event listeners to load fonts on selection
    headingSelect.addEventListener('change', function() {
        if (this.value !== 'Default') {
            loadGoogleFont(this.value);
            // Update the select's own font to preview
            setTimeout(() => {
                this.style.fontFamily = this.value === 'Default' ? 'inherit' : `'${this.value}', sans-serif`;
            }, 100);
        } else {
            this.style.fontFamily = 'inherit';
        }
    });

    bodySelect.addEventListener('change', function() {
        if (this.value !== 'Default') {
            loadGoogleFont(this.value);
            // Update the select's own font to preview
            setTimeout(() => {
                this.style.fontFamily = this.value === 'Default' ? 'inherit' : `'${this.value}', sans-serif`;
            }, 100);
        } else {
            this.style.fontFamily = 'inherit';
        }
    });

    // Style each option with its own font
    [headingSelect, bodySelect].forEach(select => {
        Array.from(select.options).forEach(option => {
            if (option.value !== 'Default') {
                option.style.fontFamily = `'${option.value}', sans-serif`;
                // Load the font for the option
                loadGoogleFont(option.value);
            }
        });
    });
});

// Upload preview image
function uploadPreviewImage(input) {
    const file = input.files[0];
    if (!file) return;

    const uploadBtn = document.getElementById('uploadPreviewBtn');
    uploadBtn.disabled = true;
    uploadBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Uploading...';

    const formData = new FormData();
    formData.append('image', file);

    fetch('/api/upload-image', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            document.getElementById('theme-preview-image').value = data.url;

            // Show preview image
            const previewDiv = document.querySelector('#theme-preview-image').parentElement;
            let imgContainer = previewDiv.querySelector('.mt-2');

            if (!imgContainer) {
                imgContainer = document.createElement('div');
                imgContainer.className = 'mt-2';
                previewDiv.appendChild(imgContainer);
            }

            imgContainer.innerHTML = `<img src="${data.url}" alt="Preview" class="img-thumbnail" style="max-width: 200px; max-height: 150px;">`;

            alert('Image uploaded successfully!');
        } else {
            alert('Failed to upload image: ' + (data.message || 'Unknown error'));
        }
    })
    .catch(error => {
        console.error('Upload error:', error);
        alert('Failed to upload image');
    })
    .finally(() => {
        uploadBtn.disabled = false;
        uploadBtn.innerHTML = '<i class="bi bi-upload me-2"></i>Upload Image';
        input.value = ''; // Reset file input
    });
}

// Theme form submission
document.getElementById('theme-form').addEventListener('submit', async function(e) {
    e.preventDefault();

    const formData = new FormData(this);
    const data = {};

    // Convert FormData to object
    for (let [key, value] of formData.entries()) {
        if (key.includes('[]')) {
            const cleanKey = key.replace('[]', '');
            if (!data[cleanKey]) data[cleanKey] = [];
            data[cleanKey].push(value);
        } else {
            data[key] = value;
        }
    }

    // Add design data
    const designData = document.getElementById('design-data').value;
    if (designData && designData !== '[]' && designData !== '') {
        try {
            data.design_data = JSON.parse(designData);
        } catch (e) {
            data.design_data = {};
        }
    } else {
        data.design_data = {};
    }

    // Add presets data
    const presetsData = document.getElementById('presets-data').value;
    console.log('Presets data from hidden field:', presetsData);
    if (presetsData && presetsData !== '[]' && presetsData !== '') {
        try {
            data.presets = JSON.parse(presetsData);
            console.log('Parsed presets:', data.presets);
        } catch (e) {
            console.error('Failed to parse presets:', e);
            data.presets = [];
        }
    } else {
        console.warn('No presets data found');
        data.presets = [];
    }

    const isNew = {{ $isNewTheme ? 'true' : 'false' }};
    const url = isNew ? '/admin/theme-builder/export' : '/admin/theme-builder/{!! $theme->id ?? '' !!}';
    const method = isNew ? 'POST' : 'PUT';

    // Log data being sent for debugging
    console.log('Saving theme with data:', data);
    console.log('Preview image:', data.preview_image);
    console.log('Presets count:', data.presets ? data.presets.length : 0);

    try {
        const response = await fetch(url, {
            method: method,
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify(data)
        });

        const result = await response.json();
        console.log('Server response:', result);

        if (result.success) {
            alert(result.message);
            window.location.href = '{!! route("admin.theme-builder.index") !!}';
        } else {
            // Show detailed validation errors
            if (result.errors) {
                let errorMsg = 'Validation errors:\n';
                if (typeof result.errors === 'object') {
                    for (let field in result.errors) {
                        if (Array.isArray(result.errors[field])) {
                            errorMsg += `\n${field}: ${result.errors[field].join(', ')}`;
                        } else {
                            errorMsg += `\n${field}: ${result.errors[field]}`;
                        }
                    }
                } else {
                    errorMsg = result.errors;
                }
                alert(errorMsg);
            } else {
                alert('Error: ' + (result.message || 'Failed to save theme'));
            }
        }
    } catch (error) {
        console.error('Error:', error);
        alert('An error occurred while saving the theme');
    }
});

// Preset management
let currentPresets = {!! json_encode($theme->presets ?? []) !!};
console.log('Initial currentPresets:', currentPresets);
console.log('Initial presets count:', currentPresets.length);

function updatePresetDisplay() {
    const presetsListContainer = document.getElementById('presets-list');
    if (!presetsListContainer) {
        // Create the container if it doesn't exist (for new themes)
        const cardBody = document.querySelector('.card-body');
        const addButton = document.querySelector('.btn-outline-success');

        const newContainer = document.createElement('div');
        newContainer.id = 'presets-list';
        newContainer.className = 'mb-3';
        cardBody.insertBefore(newContainer, addButton);

        return updatePresetDisplay(); // Recursive call after creating container
    }

    // Clear existing presets
    presetsListContainer.innerHTML = '';

    // Generate HTML for each preset
    currentPresets.forEach(preset => {
        const presetCard = document.createElement('div');
        presetCard.className = 'card mb-2';
        presetCard.setAttribute('data-preset-id', preset.id);

        // Extract font values safely
        const headingFont = (typeof preset.font_scheme?.heading === 'object')
            ? (preset.font_scheme.heading.default || 'Default')
            : (preset.font_scheme?.heading || 'Default');
        const bodyFont = (typeof preset.font_scheme?.body === 'object')
            ? (preset.font_scheme.body.default || 'Default')
            : (preset.font_scheme?.body || 'Default');

        // Build color scheme HTML
        let colorSchemeHTML = '';
        if (preset.color_scheme) {
            colorSchemeHTML = '<div class="d-flex gap-2 mb-2">';
            for (const [key, color] of Object.entries(preset.color_scheme)) {
                const colorValue = (typeof color === 'object') ? (color.default || color[0] || '#cccccc') : color;
                colorSchemeHTML += `
                    <div title="${key.charAt(0).toUpperCase() + key.slice(1)}: ${colorValue}">
                        <div style="width: 30px; height: 30px; background-color: ${colorValue}; border: 1px solid #ddd; border-radius: 4px;"></div>
                        <small class="d-block text-muted text-center">${key.charAt(0).toUpperCase() + key.slice(1)}</small>
                    </div>
                `;
            }
            colorSchemeHTML += '</div>';
        }

        // Build preset card HTML
        presetCard.innerHTML = `
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <h6 class="mb-1">
                            ${preset.name}
                            ${preset.is_default ? '<span class="badge bg-success">Default</span>' : ''}
                        </h6>
                        ${preset.description ? `<p class="text-muted small mb-2">${preset.description}</p>` : ''}
                        ${colorSchemeHTML}
                        ${preset.font_scheme ? `
                            <small class="text-muted">
                                Fonts: ${headingFont} (heading), ${bodyFont} (body)
                            </small>
                        ` : ''}
                    </div>
                    <div>
                        <button type="button" class="btn btn-sm btn-outline-primary me-1" onclick="editPreset(${preset.id})">
                            <i class="bi bi-pencil"></i>
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-danger" onclick="deletePreset(${preset.id})" ${preset.is_default && currentPresets.length === 1 ? 'disabled' : ''}>
                            <i class="bi bi-trash"></i>
                        </button>
                    </div>
                </div>
            </div>
        `;

        presetsListContainer.appendChild(presetCard);
    });

    // Show the container if there are presets
    if (currentPresets.length > 0) {
        presetsListContainer.style.display = 'block';
    }
}

document.getElementById('save-preset-btn').addEventListener('click', function() {
    const preset = {
        id: document.getElementById('preset-id').value || Date.now(),
        name: document.getElementById('preset-name').value,
        description: document.getElementById('preset-description').value,
        industry: document.getElementById('preset-industry').value,
        color_scheme: {
            primary: document.getElementById('preset-color-primary').value,
            secondary: document.getElementById('preset-color-secondary').value,
            accent: document.getElementById('preset-color-accent').value,
            dark: document.getElementById('preset-color-dark').value,
            light: document.getElementById('preset-color-light').value,
        },
        font_scheme: {
            heading: document.getElementById('preset-font-heading').value,
            body: document.getElementById('preset-font-body').value,
        },
        is_default: document.getElementById('preset-is-default').checked
    };

    if (!preset.name) {
        alert('Please enter a preset name');
        return;
    }

    // Update or add preset
    const existingIndex = currentPresets.findIndex(p => p.id == preset.id);
    if (existingIndex >= 0) {
        currentPresets[existingIndex] = preset;
    } else {
        currentPresets.push(preset);
    }

    document.getElementById('presets-data').value = JSON.stringify(currentPresets);

    // Close modal
    bootstrap.Modal.getInstance(document.getElementById('presetModal')).hide();

    // Update the preset card display without reloading
    updatePresetDisplay();

    alert('Preset saved! Click "Save Theme" to apply changes.');
});

function openNewPresetModal() {
    // Reset all form fields for new preset
    document.getElementById('preset-id').value = '';
    document.getElementById('preset-name').value = '';
    document.getElementById('preset-description').value = '';
    document.getElementById('preset-industry').value = '';
    document.getElementById('preset-color-primary').value = '#667eea';
    document.getElementById('preset-color-secondary').value = '#764ba2';
    document.getElementById('preset-color-accent').value = '#f093fb';
    document.getElementById('preset-color-dark').value = '#2d3748';
    document.getElementById('preset-color-light').value = '#f8f9fa';

    // Reset fonts to Default
    document.getElementById('preset-font-heading').value = 'Default';
    document.getElementById('preset-font-body').value = 'Default';

    // Reset font preview styles
    document.getElementById('preset-font-heading').style.fontFamily = 'inherit';
    document.getElementById('preset-font-body').style.fontFamily = 'inherit';

    document.getElementById('preset-is-default').checked = false;

    // Show modal
    new bootstrap.Modal(document.getElementById('presetModal')).show();
}

function editPreset(presetId) {
    const preset = currentPresets.find(p => p.id == presetId);
    if (!preset) return;

    document.getElementById('preset-id').value = preset.id;
    document.getElementById('preset-name').value = preset.name;
    document.getElementById('preset-description').value = preset.description || '';
    document.getElementById('preset-industry').value = preset.industry || '';
    document.getElementById('preset-color-primary').value = preset.color_scheme.primary;
    document.getElementById('preset-color-secondary').value = preset.color_scheme.secondary;
    document.getElementById('preset-color-accent').value = preset.color_scheme.accent;
    document.getElementById('preset-color-dark').value = preset.color_scheme.dark;
    document.getElementById('preset-color-light').value = preset.color_scheme.light;
    document.getElementById('preset-font-heading').value = preset.font_scheme.heading;
    document.getElementById('preset-font-body').value = preset.font_scheme.body;

    // Update font preview styles
    const headingFont = preset.font_scheme.heading;
    const bodyFont = preset.font_scheme.body;

    if (headingFont !== 'Default') {
        loadGoogleFont(headingFont);
        document.getElementById('preset-font-heading').style.fontFamily = `'${headingFont}', sans-serif`;
    } else {
        document.getElementById('preset-font-heading').style.fontFamily = 'inherit';
    }

    if (bodyFont !== 'Default') {
        loadGoogleFont(bodyFont);
        document.getElementById('preset-font-body').style.fontFamily = `'${bodyFont}', sans-serif`;
    } else {
        document.getElementById('preset-font-body').style.fontFamily = 'inherit';
    }

    document.getElementById('preset-is-default').checked = preset.is_default;

    new bootstrap.Modal(document.getElementById('presetModal')).show();
}

function deletePreset(presetId) {
    if (!confirm('Are you sure you want to delete this preset?')) return;

    currentPresets = currentPresets.filter(p => p.id != presetId);
    document.getElementById('presets-data').value = JSON.stringify(currentPresets);

    // Update the preset card display without reloading
    updatePresetDisplay();

    alert('Preset removed! Click "Save Theme" to apply changes.');
}

function deleteTheme() {
    if (!confirm('Are you sure you want to delete this theme? This cannot be undone.')) return;

    fetch('/admin/theme-builder/{!! $theme->id ?? '' !!}', {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': '{!! csrf_token() !!}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            window.location.href = '{!! route("admin.theme-builder.index") !!}';
        } else {
            alert(data.message);
        }
    });
}

function editComponent(componentId) {
    // For now, show an alert that component editing will open in Builder V2
    alert('Component editing functionality coming soon!\n\nThis will allow you to:\n- Edit component in Builder V2\n- Update component settings\n- Modify component variables\n\nFor now, components can only be imported from Builder V2 pages.');

    // TODO: In future, redirect to Builder V2 with component loaded
    // window.location.href = `/builder/component/${componentId}`;
}

// Page management functions
function updatePageSlug() {
    const title = document.getElementById('page-title').value;
    const type = document.getElementById('page-type').value;

    let slug = title || type || '';
    slug = slug.toLowerCase()
        .replace(/[^a-z0-9]+/g, '-')
        .replace(/^-+|-+$/g, '');

    document.getElementById('page-slug').value = slug;
}

document.getElementById('create-page-btn')?.addEventListener('click', async function() {
    const type = document.getElementById('page-type').value;
    const title = document.getElementById('page-title').value;
    const slug = document.getElementById('page-slug').value;
    const description = document.getElementById('page-description').value;
    const isRequired = document.getElementById('page-is-required').checked;
    const order = document.getElementById('page-order').value;

    if (!type || !title || !slug) {
        alert('Please fill in all required fields');
        return;
    }

    const btn = this;
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Creating...';

    try {
        const response = await fetch('/admin/theme-builder/{!! $theme->id ?? '' !!}/pages', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{!! csrf_token() !!}'
            },
            body: JSON.stringify({
                page_type: type,
                title: title,
                slug: slug,
                description: description,
                builder_data: [],
                is_required: isRequired,
                order: parseInt(order)
            })
        });

        const data = await response.json();

        if (data.success) {
            // Redirect to Builder V2 for theme pages
            window.location.href = `/admin/theme-builder/{!! $theme->id ?? '' !!}/pages/${data.page.id}/builder-v2`;
        } else {
            // Show detailed validation errors
            let errorMsg = 'Failed to create page:\n';
            if (data.errors) {
                if (typeof data.errors === 'object') {
                    for (let field in data.errors) {
                        if (Array.isArray(data.errors[field])) {
                            errorMsg += `\n${field}: ${data.errors[field].join(', ')}`;
                        } else {
                            errorMsg += `\n${field}: ${data.errors[field]}`;
                        }
                    }
                } else {
                    errorMsg = data.errors;
                }
            } else {
                errorMsg = data.message || 'Unknown error';
            }
            alert(errorMsg);
            btn.disabled = false;
            btn.innerHTML = 'Create Page & Design in Builder';
        }
    } catch (error) {
        console.error('Error:', error);
        alert('An error occurred while creating the page');
        btn.disabled = false;
        btn.innerHTML = 'Create Page & Design in Builder';
    }
});

function editPageSettings(pageId) {
    alert('Page settings editing coming soon!\n\nFor now, you can:\n- Edit page design by clicking the pencil icon\n- Delete the page if needed');
}

function deletePage(pageId) {
    if (!confirm('Are you sure you want to delete this page template?')) return;

    fetch(`/admin/theme-builder/{!! $theme->id ?? '' !!}/pages/${pageId}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': '{!! csrf_token() !!}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Page deleted successfully!');
            location.reload();
        } else {
            alert(data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while deleting the page');
    });
}

function setAsHomePage(pageId) {
    if (!confirm('Set this page as the home page?\n\nThis will unset any other page currently marked as home.')) return;

    fetch(`/admin/theme-builder/{!! $theme->id ?? '' !!}/pages/${pageId}/set-home`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{!! csrf_token() !!}',
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Home page updated successfully!');
            location.reload();
        } else {
            alert(data.message || 'Failed to set home page');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while setting the home page');
    });
}

// Version management functions
document.getElementById('create-version-btn')?.addEventListener('click', async function() {
    const version = document.getElementById('version-number').value;
    const changelog = document.getElementById('version-changelog').value;

    if (!version) {
        alert('Please enter a version number');
        return;
    }

    const btn = this;
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Creating...';

    try {
        const response = await fetch('/admin/theme-builder/{!! $theme->id ?? '' !!}/versions', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{!! csrf_token() !!}'
            },
            body: JSON.stringify({
                version: version,
                changelog: changelog
            })
        });

        const data = await response.json();

        if (data.success) {
            alert('Version created successfully!');
            location.reload();
        } else {
            alert('Error: ' + (data.message || 'Failed to create version'));
            btn.disabled = false;
            btn.innerHTML = 'Create Version';
        }
    } catch (error) {
        console.error('Error:', error);
        alert('An error occurred while creating the version');
        btn.disabled = false;
        btn.innerHTML = 'Create Version';
    }
});

function publishVersion(versionId) {
    if (!confirm('Publish this version? Users will be able to see and install it.')) return;

    fetch(`/admin/theme-builder/{!! $theme->id ?? '' !!}/versions/${versionId}/publish`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{!! csrf_token() !!}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Version published successfully!');
            location.reload();
        } else {
            alert(data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while publishing the version');
    });
}

// Universal Components Functions
function viewComponentCode(componentId) {
    // Fetch component details
    fetch(`/admin/components/${componentId}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const component = data.component;

                // Create modal content
                const modalHtml = `
                    <div class="modal fade" id="componentCodeModal" tabindex="-1">
                        <div class="modal-dialog modal-xl modal-dialog-scrollable">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">
                                        <i class="bi bi-code-slash me-2"></i>
                                        ${component.name} - Code
                                    </h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body">
                                    <ul class="nav nav-tabs mb-3" role="tablist">
                                        <li class="nav-item">
                                            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#html-tab">
                                                <i class="bi bi-file-code"></i> HTML
                                            </button>
                                        </li>
                                        <li class="nav-item">
                                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#css-tab">
                                                <i class="bi bi-filetype-css"></i> CSS
                                            </button>
                                        </li>
                                        <li class="nav-item">
                                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#js-tab">
                                                <i class="bi bi-filetype-js"></i> JavaScript
                                            </button>
                                        </li>
                                        <li class="nav-item">
                                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#vars-tab">
                                                <i class="bi bi-gear"></i> Variables
                                            </button>
                                        </li>
                                    </ul>
                                    <div class="tab-content">
                                        <div class="tab-pane fade show active" id="html-tab">
                                            <pre class="bg-light p-3 rounded"><code>${escapeHtml(component.html_structure || 'No HTML code')}</code></pre>
                                        </div>
                                        <div class="tab-pane fade" id="css-tab">
                                            <pre class="bg-light p-3 rounded"><code>${escapeHtml(component.css_styles || 'No CSS code')}</code></pre>
                                        </div>
                                        <div class="tab-pane fade" id="js-tab">
                                            <pre class="bg-light p-3 rounded"><code>${escapeHtml(component.js_scripts || 'No JavaScript code')}</code></pre>
                                        </div>
                                        <div class="tab-pane fade" id="vars-tab">
                                            <div class="table-responsive">
                                                <table class="table table-sm">
                                                    <thead>
                                                        <tr>
                                                            <th>Variable</th>
                                                            <th>Default Value</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        ${Object.entries(component.variables || {}).map(([key, value]) => `
                                                            <tr>
                                                                <td><code>{{${key}}}</code></td>
                                                                <td>${escapeHtml(String(value))}</td>
                                                            </tr>
                                                        `).join('')}
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                    <button type="button" class="btn btn-primary" onclick="copyAllCode(${componentId})">
                                        <i class="bi bi-clipboard"></i> Copy All Code
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                `;

                // Remove existing modal if any
                const existingModal = document.getElementById('componentCodeModal');
                if (existingModal) {
                    existingModal.remove();
                }

                // Append modal to body
                document.body.insertAdjacentHTML('beforeend', modalHtml);

                // Show modal
                const modal = new bootstrap.Modal(document.getElementById('componentCodeModal'));
                modal.show();
            } else {
                alert('Failed to load component details');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while loading component details');
        });
}

function previewComponent(componentId) {
    // Open component preview in new tab
    window.open(`/admin/components/${componentId}/preview`, '_blank');
}

function escapeHtml(text) {
    const map = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
    };
    return text.replace(/[&<>"']/g, m => map[m]);
}

function copyAllCode(componentId) {
    fetch(`/admin/components/${componentId}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const component = data.component;
                const allCode = `
<!-- HTML Structure -->
${component.html_structure || ''}

<style>
/* CSS Styles */
${component.css_styles || ''}
</style>

<script>
// JavaScript
${component.js_scripts || ''}
</script>

<!-- Variables -->
${JSON.stringify(component.variables, null, 2)}
                `.trim();

                navigator.clipboard.writeText(allCode).then(() => {
                    alert('Code copied to clipboard!');
                }).catch(err => {
                    console.error('Failed to copy:', err);
                    alert('Failed to copy code to clipboard');
                });
            }
        });
}

// Initialize tooltips for universal components
document.addEventListener('DOMContentLoaded', function() {
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
});
</script>
@endpush
@endsection