Add template preview functionality: Introduced TemplatePreviewController and TemplatePreviewService for rendering dynamic previews of header, footer, and section templates. Updated form schemas to include preview components and enhanced real-time content updates. Added configuration for template assets and integrated preview functionality into the admin panel.

app/Filament/Admin/Resources/FooterTemplates/Schemas/FooterTemplateForm.php

@@ -6,6 +6,7 @@ use Filament\Forms\Components\CodeEditor;
 use Filament\Forms\Components\TextInput;
 use Filament\Forms\Components\Toggle;
 use Filament\Schemas\Components\Section;
+use Filament\Schemas\Components\View;
 use Filament\Schemas\Schema;
 
 class FooterTemplateForm
@@ -22,19 +23,31 @@ class FooterTemplateForm
                             ->maxLength(255)
                             ->columnSpanFull(),
 
+                        // Preview Component
+                        View::make('components.template-preview')
+                            ->extraAttributes([
+                                'data-type' => 'footer',
+                                'data-field-name' => 'html_content',
+                            ])
+                            ->columnSpanFull(),
+
                         CodeEditor::make('html_content')
                             ->label(__('footer-templates.field_html_content'))
                             ->required()
-                            //->lineNumbers()
+                            ->live(onBlur: false) // Real-time updates
                             ->columnSpanFull()
-                            ->helperText(__('footer-templates.field_html_content_help')),
+                            ->helperText(__('footer-templates.field_html_content_help'))
+                            ->extraAttributes([
+                                'style' => 'min-height: 400px;',
+                                'data-field-name' => 'html_content',
+                            ]),
 
                         Toggle::make('is_active')
                             ->label(__('footer-templates.field_is_active'))
                             ->default(true)
                             ->inline(false),
                     ])
-                    ->columns(2),
+                    ->columnSpanFull(),
             ]);
     }
 }

app/Filament/Admin/Resources/HeaderTemplates/Schemas/HeaderTemplateForm.php

@@ -6,6 +6,7 @@ use Filament\Forms\Components\CodeEditor;
 use Filament\Forms\Components\TextInput;
 use Filament\Forms\Components\Toggle;
 use Filament\Schemas\Components\Section;
+use Filament\Schemas\Components\View;
 use Filament\Schemas\Schema;
 
 class HeaderTemplateForm
@@ -22,19 +23,31 @@ class HeaderTemplateForm
                             ->maxLength(255)
                             ->columnSpanFull(),
 
+                        // Preview Component
+                        View::make('components.template-preview')
+                            ->extraAttributes([
+                                'data-type' => 'header',
+                                'data-field-name' => 'html_content',
+                            ])
+                            ->columnSpanFull(),
+
                         CodeEditor::make('html_content')
                             ->label(__('header-templates.field_html_content'))
                             ->required()
-                            //->lineNumbers()
+                            ->live(onBlur: false) // Real-time updates
                             ->columnSpanFull()
-                            ->helperText(__('header-templates.field_html_content_help')),
+                            ->helperText(__('header-templates.field_html_content_help'))
+                            ->extraAttributes([
+                                'style' => 'min-height: 400px;',
+                                'data-field-name' => 'html_content',
+                            ]),
 
                         Toggle::make('is_active')
                             ->label(__('header-templates.field_is_active'))
                             ->default(true)
                             ->inline(false),
                     ])
-                    ->columns(2),
+                    ->columnSpanFull(),
             ]);
     }
 }

app/Filament/Admin/Resources/SectionTemplates/Schemas/SectionTemplateForm.php

@@ -6,6 +6,7 @@ use Filament\Forms\Components\CodeEditor;
 use Filament\Forms\Components\TextInput;
 use Filament\Forms\Components\Toggle;
 use Filament\Schemas\Components\Section;
+use Filament\Schemas\Components\View;
 use Filament\Schemas\Schema;
 
 class SectionTemplateForm
@@ -22,19 +23,31 @@ class SectionTemplateForm
                             ->maxLength(255)
                             ->columnSpanFull(),
 
+                        // Preview Component
+                        View::make('components.template-preview')
+                            ->extraAttributes([
+                                'data-type' => 'section',
+                                'data-field-name' => 'html_content',
+                            ])
+                            ->columnSpanFull(),
+
                         CodeEditor::make('html_content')
                             ->label(__('section-templates.field_html_content'))
                             ->required()
-                            //->lineNumbers()
+                            ->live(onBlur: false) // Real-time updates
                             ->columnSpanFull()
-                            ->helperText(__('section-templates.field_html_content_help')),
+                            ->helperText(__('section-templates.field_html_content_help'))
+                            ->extraAttributes([
+                                'style' => 'min-height: 400px;',
+                                'data-field-name' => 'html_content',
+                            ]),
 
                         Toggle::make('is_active')
                             ->label(__('section-templates.field_is_active'))
                             ->default(true)
                             ->inline(false),
                     ])
-                    ->columns(2),
+                    ->columnSpanFull(),
             ]);
     }
 }

app/Http/Controllers/TemplatePreviewController.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Services\TemplatePreviewService;
+use Illuminate\Http\Request;
+
+class TemplatePreviewController extends Controller
+{
+    /**
+     * Render template preview
+     *
+     * @param Request $request
+     * @return \Illuminate\View\View
+     */
+    public function preview(Request $request)
+    {
+        $content = $request->input('content', '');
+        $type = $request->input('type', 'section'); // header, footer, section
+
+        // Validate type
+        if (!in_array($type, ['header', 'footer', 'section'])) {
+            $type = 'section';
+        }
+
+        $html = TemplatePreviewService::getPreviewHtml($content, $type);
+
+        return response($html)
+            ->header('Content-Type', 'text/html; charset=utf-8');
+    }
+}
+

app/Services/TemplatePreviewService.php

@@ -0,0 +1,150 @@
+<?php
+
+namespace App\Services;
+
+use App\Models\Setting;
+
+class TemplatePreviewService
+{
+    /**
+     * Get all CSS assets for preview
+     *
+     * @return array
+     */
+    public static function getCssAssets(): array
+    {
+        $config = config('template-preview.css', []);
+        
+        if (config('template-preview.use_settings_override', false)) {
+            $settingsKeys = config('template-preview.settings_keys', []);
+            
+            foreach ($settingsKeys as $assetKey => $settingKey) {
+                if (str_starts_with($assetKey, 'css_')) {
+                    $setting = Setting::get($settingKey);
+                    if ($setting) {
+                        $configKey = str_replace('css_', '', $assetKey);
+                        $config[$configKey] = $setting;
+                    }
+                }
+            }
+        }
+
+        return $config;
+    }
+
+    /**
+     * Get all JavaScript assets for preview
+     *
+     * @return array
+     */
+    public static function getJsAssets(): array
+    {
+        $config = config('template-preview.js', []);
+        
+        if (config('template-preview.use_settings_override', false)) {
+            $settingsKeys = config('template-preview.settings_keys', []);
+            
+            foreach ($settingsKeys as $assetKey => $settingKey) {
+                if (str_starts_with($assetKey, 'js_')) {
+                    $setting = Setting::get($settingKey);
+                    if ($setting) {
+                        $configKey = str_replace('js_', '', $assetKey);
+                        $config[$configKey] = $setting;
+                    }
+                }
+            }
+        }
+
+        return $config;
+    }
+
+    /**
+     * Get formatted CSS link tags
+     *
+     * @return string
+     */
+    public static function getCssLinks(): string
+    {
+        $assets = self::getCssAssets();
+        $html = '';
+
+        foreach ($assets as $key => $path) {
+            if ($key === 'fonts') {
+                // Preload for fonts
+                $html .= sprintf(
+                    '<link rel="preload" href="%s" as="style" onload="this.rel=\'stylesheet\'">' . "\n",
+                    asset($path)
+                );
+            } else {
+                $html .= sprintf(
+                    '<link rel="stylesheet" href="%s">' . "\n",
+                    asset($path)
+                );
+            }
+        }
+
+        return $html;
+    }
+
+    /**
+     * Get formatted JavaScript script tags
+     *
+     * @return string
+     */
+    public static function getJsScripts(): string
+    {
+        $assets = self::getJsAssets();
+        $html = '';
+
+        foreach ($assets as $path) {
+            $html .= sprintf(
+                '<script src="%s"></script>' . "\n",
+                asset($path)
+            );
+        }
+
+        return $html;
+    }
+
+    /**
+     * Get full HTML structure for preview
+     *
+     * @param string $content The template HTML content
+     * @param string $type The template type: 'header', 'footer', or 'section'
+     * @return string
+     */
+    public static function getPreviewHtml(string $content, string $type = 'section'): string
+    {
+        $cssLinks = self::getCssLinks();
+        $jsScripts = self::getJsScripts();
+        $meta = config('template-preview.meta', []);
+
+        $viewport = $meta['viewport'] ?? 'width=device-width, initial-scale=1';
+        $charset = $meta['charset'] ?? 'utf-8';
+
+        // Wrap content based on type
+        $bodyContent = match($type) {
+            'header' => $content,
+            'footer' => $content,
+            'section' => '<div class="container py-8">' . $content . '</div>',
+            default => $content,
+        };
+
+        return <<<HTML
+<!doctype html>
+<html lang="tr">
+<head>
+    <meta charset="{$charset}">
+    <meta name="viewport" content="{$viewport}">
+    <title>Template Preview</title>
+    {$cssLinks}
+</head>
+<body style="margin: 0; padding: 0;">
+    {$bodyContent}
+    {$jsScripts}
+</body>
+</html>
+HTML;
+    }
+}
+

config/template-preview.php

@@ -0,0 +1,54 @@
+<?php
+
+return [
+    /*
+    |--------------------------------------------------------------------------
+    | Template Preview Asset Configuration
+    |--------------------------------------------------------------------------
+    |
+    | This configuration file contains all asset paths that should be loaded
+    | in the template preview iframe. These assets are used to ensure the
+    | preview displays correctly with the same styling and scripts as the
+    | actual site.
+    |
+    | You can override these values in Settings table if needed, or modify
+    | this config file for project-specific asset paths.
+    |
+    */
+
+    // CSS Assets (Stylesheets)
+    'css' => [
+        'style' => 'html/style.css',
+        'unicons' => 'assets/fonts/unicons/unicons.css',
+        'plugins' => 'assets/css/plugins.css',
+        'colors' => 'assets/css/colors/grape.css',
+        'fonts' => 'assets/css/fonts/urbanist.css',
+    ],
+
+    // JavaScript Assets
+    'js' => [
+        'plugins' => 'assets/js/plugins.js',
+        'theme' => 'assets/js/theme.js',
+    ],
+
+    // Additional meta tags and head content
+    'meta' => [
+        'viewport' => 'width=device-width, initial-scale=1',
+        'charset' => 'utf-8',
+    ],
+
+    // Whether to load assets from Settings table (overrides config)
+    'use_settings_override' => false,
+
+    // Settings keys for asset paths (if use_settings_override is true)
+    'settings_keys' => [
+        'css_style' => 'template_preview_css_style',
+        'css_unicons' => 'template_preview_css_unicons',
+        'css_plugins' => 'template_preview_css_plugins',
+        'css_colors' => 'template_preview_css_colors',
+        'css_fonts' => 'template_preview_css_fonts',
+        'js_plugins' => 'template_preview_js_plugins',
+        'js_theme' => 'template_preview_js_theme',
+    ],
+];
+

resources/views/components/template-preview.blade.php

@@ -0,0 +1,288 @@
+@php
+    $previewUrl = route('template.preview');
+    // Get type and fieldName from component attributes or defaults
+    $type = $attributes->get('data-type') ?? 'section';
+    $fieldName = $attributes->get('data-field-name') ?? 'html_content';
+@endphp
+
+<div 
+    x-data="templatePreview(@js($previewUrl), @js($type), @js($fieldName))"
+    class="template-preview-wrapper w-full"
+    style="width: 100%;"
+    wire:ignore>
+    <div class="fi-fo-field-wrp-label">
+        <label class="fi-fo-field-wrp-label-label text-sm font-medium text-gray-700 dark:text-gray-300">
+            {{ __('Preview') }}
+        </label>
+    </div>
+    
+    <div class="mt-2 border border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden bg-white dark:bg-gray-800" 
+         style="min-height: 400px; position: relative; width: 100%;">
+        <!-- Loading indicator -->
+        <div 
+            x-show="isLoading || !iframeSrc" 
+            class="absolute inset-0 flex items-center justify-center bg-gray-50 dark:bg-gray-900"
+            style="z-index: 10;"
+            x-transition>
+            <div class="text-center">
+                <svg class="animate-spin h-8 w-8 text-gray-400 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
+                    <span x-show="isLoading">Yükleniyor...</span>
+                    <span x-show="!isLoading && !iframeSrc">Önizleme için içerik girin</span>
+                </p>
+            </div>
+        </div>
+        
+        <!-- Preview iframe -->
+        <iframe 
+            x-show="!isLoading && iframeSrc"
+            :src="iframeSrc"
+            class="w-full border-0"
+            style="min-height: 400px; width: 100%; display: block;"
+            frameborder="0"
+            loading="lazy"
+            x-transition>
+        </iframe>
+    </div>
+    
+    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+        {{ __('Önizleme gerçek zamanlı olarak güncellenir') }}
+    </p>
+</div>
+
+@push('scripts')
+<script>
+function templatePreview(previewUrl, type, fieldName) {
+    return {
+        previewUrl: previewUrl,
+        type: type,
+        fieldName: fieldName,
+        iframeSrc: '',
+        isLoading: false,
+        content: '',
+        debounceTimer: null,
+        
+        init() {
+            // Watch Livewire events for Filament form updates
+            if (window.Livewire) {
+                // Listen for form state updates
+                Livewire.on('filament-forms::update-state', ({ statePath, state }) => {
+                    if (statePath === this.fieldName || statePath?.endsWith(this.fieldName)) {
+                        this.content = state || '';
+                        this.debouncedUpdate();
+                    }
+                });
+                
+                // Listen for any Livewire updates
+                document.addEventListener('livewire:update', () => {
+                    this.debouncedUpdate();
+                });
+            }
+            
+            // Watch CodeMirror editor directly
+            this.watchCodeMirror();
+            
+            // Watch for direct input changes (fallback for code editor)
+            const observer = new MutationObserver(() => {
+                this.debouncedUpdate();
+            });
+            
+            // Observe form changes
+            const form = document.querySelector('form[wire\\:submit]');
+            if (form) {
+                observer.observe(form, {
+                    childList: true,
+                    subtree: true,
+                    characterData: true,
+                });
+            }
+            
+            // Initial update after a short delay
+            setTimeout(() => {
+                this.updatePreview();
+            }, 1000);
+            
+            // Periodic update fallback (every 3 seconds)
+            this.intervalId = setInterval(() => {
+                this.updatePreview();
+            }, 3000);
+        },
+        
+        watchCodeMirror() {
+            // Try to find CodeMirror editor instance
+            const findCodeMirror = () => {
+                // Look for CodeMirror editor instances
+                const editors = document.querySelectorAll('.cm-editor, [data-code-editor]');
+                editors.forEach(editor => {
+                    // Check if this is our field
+                    const fieldWrapper = editor.closest('[data-field-name], .fi-fo-field-wrp');
+                    if (fieldWrapper) {
+                        const fieldLabel = fieldWrapper.querySelector('label');
+                        if (fieldLabel && fieldLabel.textContent.includes('HTML Content')) {
+                            // Found our editor, try to get CodeMirror instance
+                            const cmInstance = editor.__cm || editor.cm || editor;
+                            if (cmInstance && cmInstance.getValue) {
+                                // Watch for changes
+                                if (cmInstance.on) {
+                                    cmInstance.on('change', () => {
+                                        this.content = cmInstance.getValue();
+                                        this.debouncedUpdate();
+                                    });
+                                }
+                            }
+                        }
+                    }
+                });
+            };
+            
+            // Try immediately and after a delay
+            findCodeMirror();
+            setTimeout(findCodeMirror, 1000);
+            setTimeout(findCodeMirror, 2000);
+        },
+        
+        debouncedUpdate() {
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = setTimeout(() => {
+                this.updatePreview();
+            }, 500); // 500ms debounce
+        },
+        
+        async updatePreview() {
+            // Get content from Livewire - try different methods
+            let content = this.content || '';
+            
+            try {
+                // Method 1: Try CodeMirror editor directly (most reliable for CodeEditor)
+                // Find editor by data-field-name attribute
+                const fieldWrapper = document.querySelector(`[data-field-name="${this.fieldName}"]`);
+                if (fieldWrapper) {
+                    const cmEditor = fieldWrapper.querySelector('.cm-editor');
+                    if (cmEditor) {
+                        const cmInstance = cmEditor.__cm || cmEditor.cm || window.CodeMirror?.fromTextArea?.(cmEditor.querySelector('textarea'));
+                        if (cmInstance && typeof cmInstance.getValue === 'function') {
+                            content = cmInstance.getValue() || '';
+                        } else if (cmEditor.querySelector('.cm-content')) {
+                            // Fallback: get text from content div
+                            content = cmEditor.querySelector('.cm-content').textContent || '';
+                        }
+                    }
+                }
+                
+                // Method 1b: Try all CodeMirror editors if specific one not found
+                if (!content) {
+                    const cmEditors = document.querySelectorAll('.cm-editor');
+                    for (const cmEditor of cmEditors) {
+                        const fieldWrapper = cmEditor.closest('[data-field-name]');
+                        if (fieldWrapper && fieldWrapper.getAttribute('data-field-name') === this.fieldName) {
+                            const cmInstance = cmEditor.__cm || cmEditor.cm;
+                            if (cmInstance && typeof cmInstance.getValue === 'function') {
+                                content = cmInstance.getValue() || '';
+                                if (content) break;
+                            } else if (cmEditor.querySelector('.cm-content')) {
+                                content = cmEditor.querySelector('.cm-content').textContent || '';
+                                if (content) break;
+                            }
+                        }
+                    }
+                }
+                
+                // Method 2: Try to find CodeEditor textarea/input directly
+                if (!content) {
+                    const codeEditor = document.querySelector(`textarea[name="${this.fieldName}"], 
+                        textarea[wire\\:model*="${this.fieldName}"],
+                        .fi-fo-field-wrp textarea,
+                        .cm-content`);
+                    
+                    if (codeEditor) {
+                        content = codeEditor.value || codeEditor.textContent || '';
+                    }
+                }
+                
+                // Method 3: Try Livewire $wire
+                if (!content && window.Livewire) {
+                    // Find the Livewire component
+                    const livewireComponent = document.querySelector('[wire\\:id], form[wire\\:submit]');
+                    if (livewireComponent) {
+                        const wireId = livewireComponent.getAttribute('wire:id');
+                        if (wireId) {
+                            const livewire = window.Livewire.find(wireId);
+                            if (livewire && livewire.get) {
+                                content = livewire.get(this.fieldName) || '';
+                            }
+                        } else {
+                            // Try Alpine.js $wire
+                            const alpineData = Alpine.$data(livewireComponent);
+                            if (alpineData && alpineData.$wire && alpineData.$wire.get) {
+                                content = alpineData.$wire.get(this.fieldName) || '';
+                            }
+                        }
+                    }
+                }
+            } catch (e) {
+                console.warn('Could not get content:', e);
+            }
+            
+            // Use existing content if new fetch failed
+            if (!content && this.content) {
+                content = this.content;
+            }
+            
+            this.content = content;
+            
+            if (!this.content || this.content.trim() === '') {
+                if (this.iframeSrc) {
+                    URL.revokeObjectURL(this.iframeSrc);
+                    this.iframeSrc = '';
+                }
+                return;
+            }
+            
+            this.isLoading = true;
+            
+            try {
+                // Create form data
+                const formData = new FormData();
+                formData.append('content', this.content);
+                formData.append('type', this.type);
+                formData.append('_token', document.querySelector('meta[name="csrf-token"]')?.content || '');
+                
+                // Fetch preview HTML
+                const response = await fetch(this.previewUrl, {
+                    method: 'POST',
+                    body: formData,
+                    headers: {
+                        'X-Requested-With': 'XMLHttpRequest',
+                        'Accept': 'text/html',
+                    }
+                });
+                
+                if (!response.ok) {
+                    throw new Error('Preview request failed');
+                }
+                
+                const html = await response.text();
+                
+                // Create blob URL for iframe
+                const blob = new Blob([html], { type: 'text/html; charset=utf-8' });
+                
+                // Revoke old URL if exists
+                if (this.iframeSrc) {
+                    URL.revokeObjectURL(this.iframeSrc);
+                }
+                
+                this.iframeSrc = URL.createObjectURL(blob);
+                this.isLoading = false;
+            } catch (error) {
+                console.error('Preview error:', error);
+                this.isLoading = false;
+            }
+        }
+    };
+}
+</script>
+@endpush
+

routes/web.php

@@ -3,6 +3,7 @@
 use Illuminate\Support\Facades\Route;
 use App\Http\Controllers\PageController;
 use App\Http\Controllers\BlogController;
+use App\Http\Controllers\TemplatePreviewController;
 use App\Models\Page;
 
 // Debug Route - Veritabanı kontrolü
@@ -60,5 +61,10 @@ Route::get('/', [PageController::class, 'index'])->name('homepage');
 Route::get('/blog', [BlogController::class, 'index'])->name('blog.index');
 Route::get('/blog/{slug}', [BlogController::class, 'show'])->name('blog.show');
 
+// Template Preview (admin panel için)
+Route::post('/admin/template-preview', [TemplatePreviewController::class, 'preview'])
+    ->middleware(['auth'])
+    ->name('template.preview');
+
 // Pages (en sonda olmalı - catch-all)
 Route::get('/{slug}', [PageController::class, 'show'])->name('page.show');