@extends('examples.modern-layout-v2')
@section('title', __('messages.printer_settings.printer_settings'))
@section('printer-settings', 'bg-blue-50 text-blue-700')

@section('content')
<div x-data="printerSettingsData()" x-init="init()">
    <!-- Page Header -->
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                <h2 class="text-3xl font-bold text-gray-900 mb-2">{{__('messages.printer_settings.printer_settings')}}</h2>
                <p class="text-gray-600">{{__('messages.printer_settings.printer_settings')}}</p>
            </div>
        </div>
    </div>

    <!-- Success/Error Messages -->
    @if(session('success'))
    <div class="mb-6 bg-green-50 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') border-r-4 @else border-l-4 @endif border-green-500 rounded-xl p-5 shadow-sm">
        <div class="flex items-start @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
            <div class="flex-shrink-0">
                <span class="material-icons text-green-600 text-2xl">check_circle</span>
            </div>
            <div class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') mr-4 @else ml-4 @endif flex-1">
                <p class="text-green-800 font-medium">{{ session('success') }}</p>
            </div>
        </div>
    </div>
    @endif

    @if(session('error'))
    <div class="mb-6 bg-red-50 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') border-r-4 @else border-l-4 @endif border-red-500 rounded-xl p-5 shadow-sm">
        <div class="flex items-start @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') flex-row-reverse @endif">
            <div class="flex-shrink-0">
                <span class="material-icons text-red-600 text-2xl">error_outline</span>
            </div>
            <div class="@if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') mr-4 @else ml-4 @endif flex-1">
                <p class="text-red-800 font-medium">{{ session('error') }}</p>
            </div>
        </div>
    </div>
    @endif

    <!-- Two Column Layout: Settings on Left, Preview on Right -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Left Column: Settings Form -->
        <div class="lg:col-span-1">
    <form method="POST" action="{{ \App\Helpers\UrlHelper::routeWithCityBuilding('printer.settings.update') }}" class="space-y-6" @submit="loading = true">
        @csrf
        @if(request()->query('building'))
            <input type="hidden" name="building" value="{{ request()->query('building') }}">
        @endif

        <!-- Text Content Section -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow duration-200">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h3 class="text-xl font-semibold text-gray-900 mb-1">{{__('messages.printer_settings.printer_settings')}}</h3>
                    <p class="text-sm text-gray-500">{{__('messages.printer_settings.printer_settings')}}</p>
                </div>
                <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
                    <span class="material-icons text-blue-600">print</span>
                </div>
            </div>

            <div class="space-y-6">
                <!-- Subtitle -->
                <div>
                    <label for="printer_subtitle" class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                        {{__('messages.printer_settings.subtitle')}}
                    </label>
                    <input type="text" id="printer_subtitle" name="printer_subtitle" value="{{ old('printer_subtitle', $settings->printer_subtitle ?? '') }}" 
                           class="block w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                           placeholder="{{__('messages.printer_settings.subtitle')}}">
                    <p class="mt-2 text-xs text-gray-500 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                        {{__('messages.printer_settings.subtitle')}} - {{__('messages.printer_settings.subtitle')}}
                    </p>
                </div>

                <!-- Wait Messages (Arabic and Kurdish together) -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="printer_wait_message_ar" class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                            {{__('messages.printer_settings.wait_message_ar')}}
                        </label>
                        <textarea id="printer_wait_message_ar" name="printer_wait_message_ar" rows="3"
                                  class="block w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                                  placeholder="{{__('messages.printer_settings.wait_message_ar')}}">{{ old('printer_wait_message_ar', $settings->printer_wait_message_ar ?? '') }}</textarea>
                    </div>
                    <div>
                        <label for="printer_wait_message_ku" class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                            {{__('messages.printer_settings.wait_message_ku')}}
                        </label>
                        <textarea id="printer_wait_message_ku" name="printer_wait_message_ku" rows="3"
                                  class="block w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                                  placeholder="{{__('messages.printer_settings.wait_message_ku')}}">{{ old('printer_wait_message_ku', $settings->printer_wait_message_ku ?? '') }}</textarea>
                    </div>
                </div>

                <!-- Website URL -->
                <div>
                    <label for="printer_website_url" class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                        {{__('messages.printer_settings.website_url')}}
                    </label>
                    <input type="text" id="printer_website_url" name="printer_website_url" value="{{ old('printer_website_url', $settings->printer_website_url ?? '') }}" 
                           class="block w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                           placeholder="https://example.com">
                </div>

                <!-- Powered By Text -->
                <div>
                    <label for="printer_powered_by_text" class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                        {{__('messages.printer_settings.powered_by_text')}}
                    </label>
                    <input type="text" id="printer_powered_by_text" name="printer_powered_by_text" value="{{ old('printer_powered_by_text', $settings->printer_powered_by_text ?? 'Powered by') }}" 
                           class="block w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                           placeholder="Powered by">
                </div>

                <!-- QR Code Image -->
                <div>
                    <label for="printer_qr_code_image" class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                        {{__('messages.printer_settings.qr_code_image')}}
                    </label>
                    <input type="text" id="printer_qr_code_image" name="printer_qr_code_image" value="{{ old('printer_qr_code_image', $settings->printer_qr_code_image ?? 'qr-code.png') }}" 
                           class="block w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                           placeholder="qr-code.png">
                    <p class="mt-2 text-xs text-gray-500 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                        {{__('messages.printer_settings.qr_code_image')}} - {{__('messages.printer_settings.qr_code_image')}}
                    </p>
                </div>
            </div>
        </div>

        <!-- Font Sizes Section -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow duration-200" x-data="{ fontSizesOpen: true }">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h3 class="text-xl font-semibold text-gray-900 mb-1">{{__('messages.printer_settings.font_sizes')}}</h3>
                    <p class="text-sm text-gray-500">{{__('messages.printer_settings.font_sizes')}}</p>
                </div>
                <button type="button" @click="fontSizesOpen = !fontSizesOpen" class="w-12 h-12 bg-gray-100 rounded-xl flex items-center justify-center hover:bg-gray-200 transition-colors">
                    <span class="material-icons text-gray-600" x-text="fontSizesOpen ? 'expand_less' : 'expand_more'">expand_less</span>
                </button>
            </div>

            <div x-show="fontSizesOpen" x-transition class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <!-- Title Font Size -->
                <div>
                    <label for="printer_title_font_size" class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                        {{__('messages.printer_settings.title_font_size')}}
                    </label>
                    <input type="number" id="printer_title_font_size" name="printer_title_font_size" 
                           value="{{ old('printer_title_font_size', $settings->printer_title_font_size ?? 16) }}" 
                           min="8" max="72" step="1"
                           class="block w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                </div>

                <!-- Subtitle Font Size -->
                <div>
                    <label for="printer_subtitle_font_size" class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                        {{__('messages.printer_settings.subtitle_font_size')}}
                    </label>
                    <input type="number" id="printer_subtitle_font_size" name="printer_subtitle_font_size" 
                           value="{{ old('printer_subtitle_font_size', $settings->printer_subtitle_font_size ?? 16) }}" 
                           min="8" max="72" step="1"
                           class="block w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                </div>

                <!-- Token Font Size -->
                <div>
                    <label for="printer_token_font_size" class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                        {{__('messages.printer_settings.token_font_size')}}
                    </label>
                    <input type="number" id="printer_token_font_size" name="printer_token_font_size" 
                           value="{{ old('printer_token_font_size', $settings->printer_token_font_size ?? 32) }}" 
                           min="8" max="72" step="1"
                           class="block w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                </div>

                <!-- Service Font Size -->
                <div>
                    <label for="printer_service_font_size" class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                        {{__('messages.printer_settings.service_font_size')}}
                    </label>
                    <input type="number" id="printer_service_font_size" name="printer_service_font_size" 
                           value="{{ old('printer_service_font_size', $settings->printer_service_font_size ?? 16) }}" 
                           min="8" max="72" step="1"
                           class="block w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                </div>

                <!-- Location Font Size -->
                <div>
                    <label for="printer_location_font_size" class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                        {{__('messages.printer_settings.location_font_size')}}
                    </label>
                    <input type="number" id="printer_location_font_size" name="printer_location_font_size" 
                           value="{{ old('printer_location_font_size', $settings->printer_location_font_size ?? 16) }}" 
                           min="8" max="72" step="1"
                           class="block w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                </div>

                <!-- Date Font Size -->
                <div>
                    <label for="printer_date_font_size" class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                        {{__('messages.printer_settings.date_font_size')}}
                    </label>
                    <input type="number" id="printer_date_font_size" name="printer_date_font_size" 
                           value="{{ old('printer_date_font_size', $settings->printer_date_font_size ?? 18) }}" 
                           min="8" max="72" step="1"
                           class="block w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                </div>

                <!-- Wait Message Font Size -->
                <div>
                    <label for="printer_wait_message_font_size" class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                        {{__('messages.printer_settings.wait_message_font_size')}}
                    </label>
                    <input type="number" id="printer_wait_message_font_size" name="printer_wait_message_font_size" 
                           value="{{ old('printer_wait_message_font_size', $settings->printer_wait_message_font_size ?? 16) }}" 
                           min="8" max="72" step="1"
                           class="block w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                </div>

                <!-- Website Font Size -->
                <div>
                    <label for="printer_website_font_size" class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                        {{__('messages.printer_settings.website_font_size')}}
                    </label>
                    <input type="number" id="printer_website_font_size" name="printer_website_font_size" 
                           value="{{ old('printer_website_font_size', $settings->printer_website_font_size ?? 12) }}" 
                           min="8" max="72" step="1"
                           class="block w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                </div>

                <!-- Footer Font Size -->
                <div>
                    <label for="printer_footer_font_size" class="block text-sm font-medium text-gray-700 mb-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                        {{__('messages.printer_settings.footer_font_size')}}
                    </label>
                    <input type="number" id="printer_footer_font_size" name="printer_footer_font_size" 
                           value="{{ old('printer_footer_font_size', $settings->printer_footer_font_size ?? 10) }}" 
                           min="8" max="72" step="1"
                           class="block w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                </div>
            </div>
        </div>

        <!-- Submit Button -->
        <div class="flex items-center justify-end gap-4 pt-4">
            <button type="submit" 
                    class="inline-flex items-center px-8 py-3.5 bg-gradient-to-r from-blue-600 to-blue-500 text-white font-semibold rounded-xl hover:from-blue-700 hover:to-blue-600 transition-all duration-300 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed"
                    x-bind:disabled="loading">
                <span x-show="!loading" class="material-icons mr-2">save</span>
                <span x-show="loading" class="animate-spin material-icons mr-2">sync</span>
                <span x-text="loading ? '{{__('messages.common.saving')}}' : '{{__('messages.printer_settings.save_settings')}}'"></span>
            </button>
        </div>
    </form>
        </div>

        <!-- Right Column: Live Preview -->
        <div class="lg:col-span-1">
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow duration-200 lg:sticky lg:top-6">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <div class="flex items-center gap-2 mb-1">
                        <h3 class="text-xl font-semibold text-gray-900">{{__('messages.printer_settings.live_preview') ?: 'Live Preview'}}</h3>
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 animate-pulse">
                            <span class="w-2 h-2 bg-green-500 rounded-full mr-1"></span>
                            LIVE
                        </span>
                    </div>
                    <p class="text-sm text-gray-500">{{__('messages.printer_settings.live_preview_description') ?: 'Preview updates instantly as you type'}}</p>
                </div>
                <div class="flex items-center gap-2">
                    <button type="button" @click="updatePreview()" class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center hover:bg-blue-200 transition-colors" title="Refresh Preview">
                        <span class="material-icons text-blue-600 text-lg">refresh</span>
                    </button>
                    <button type="button" @click="window.print()" class="w-10 h-10 bg-gray-100 rounded-xl flex items-center justify-center hover:bg-gray-200 transition-colors" title="Print Preview">
                        <span class="material-icons text-gray-600 text-lg">print</span>
                    </button>
                </div>
            </div>
            
            <div class="border-2 border-dashed border-gray-300 rounded-xl p-4 bg-gray-50 overflow-auto max-h-[calc(100vh-250px)]">
                <div id="live-preview" class="flex justify-center">
                    <div id="printarea" style="width: 3inch; max-width: 288px; margin: 0 auto; padding: 20px; background: white; border: 2px dashed #e5e7eb;">
                        <!-- Preview content will be updated by JavaScript -->
                        <p id="preview-title" style="font-size: {{ $settings->printer_title_font_size ?? 16 }}px; font-weight: bold; margin: 5px 0; text-align: center;">{{ $settings->name ?? 'Company Name' }}</p>
                        <p id="preview-subtitle" style="font-size: {{ $settings->printer_subtitle_font_size ?? 16 }}px; font-weight: bold; margin: 5px 0; text-align: center; {{ $settings->printer_subtitle ? '' : 'display: none;' }}">{{ $settings->printer_subtitle ?? '' }}</p>
                        <br>
                        <p id="preview-service" style="font-size: {{ $settings->printer_service_font_size ?? 16 }}px; margin: 5px 0; text-align: center;">Sample Service</p>
                        <br>
                        <h3 id="preview-token" style="font-size: {{ $settings->printer_token_font_size ?? 32 }}px; font-weight: bold; margin: 10px 0; text-align: center;">A - 001</h3>
                        <p id="preview-location" style="font-size: {{ $settings->printer_location_font_size ?? 16 }}px; margin: 5px 0; text-align: center; direction: ltr;">Sample Location - موقع تجريبي</p>
                        <br>
                        <p id="preview-date" style="font-size: {{ $settings->printer_date_font_size ?? 18 }}px; margin: 5px 0; text-align: center; direction: ltr;">{{ now()->format('Y-m-d H:i') }}</p>
                        <br>
                        <p id="preview-wait-ar" style="font-size: {{ $settings->printer_wait_message_font_size ?? 16 }}px; margin: 5px 0; padding-top: 20px; text-align: center;">{{ $settings->printer_wait_message_ar ?? '' }}</p>
                        <br>
                        <p id="preview-wait-ku" style="font-size: {{ $settings->printer_wait_message_font_size ?? 16 }}px; margin-top: 10px; text-align: center; {{ $settings->printer_wait_message_ku ? '' : 'display: none;' }}">{{ $settings->printer_wait_message_ku ?? '' }}</p>
                        <br>
                        <p id="preview-website" style="font-size: {{ $settings->printer_website_font_size ?? 12 }}px; margin: 3px 0; text-align: center; {{ $settings->printer_website_url ? '' : 'display: none;' }}">{{ $settings->printer_website_url ?? '' }}</p>
                        <br>
                        <div style="display: flex; align-items: center; justify-content: center; gap: 10px; margin: 5px 0; direction: ltr; text-align: left;">
                            <span id="preview-powered" style="font-size: {{ $settings->printer_footer_font_size ?? 10 }}px;">{{ $settings->printer_powered_by_text ?? 'Powered by' }}</span>
                            <img id="preview-qr-code" src="{{ $settings->printer_qr_code_image ? asset($settings->printer_qr_code_image) : '' }}" alt="QR Code" style="width: 50px; height: 50px; max-width: 50px; max-height: 50px; display: {{ $settings->printer_qr_code_image ? 'block' : 'none' }}; object-fit: contain;" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                            <div id="preview-qr-placeholder" style="width: 50px; height: 50px; background: #f3f4f6; border: 1px dashed #d1d5db; display: {{ $settings->printer_qr_code_image ? 'none' : 'flex' }}; align-items: center; justify-content: center; font-size: 8px; color: #9ca3af;">QR</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mt-4 text-center">
                <a href="{{ \App\Helpers\UrlHelper::routeWithCityBuilding('printer.preview') }}" target="_blank" class="inline-flex items-center px-4 py-2 text-sm text-gray-600 hover:text-gray-900 transition-colors">
                    <span class="material-icons text-sm mr-1">open_in_new</span>
                    {{__('messages.printer_settings.open_preview')}}
                </a>
            </div>
        </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function printerSettingsData() {
    return {
        loading: false,
        init() {
            // Scroll to top if there's a success/error message
            @if(session('success') || session('error'))
                window.scrollTo({ top: 0, behavior: 'smooth' });
                // Auto-dismiss success message after 5 seconds
                @if(session('success'))
                    setTimeout(() => {
                        const successMsg = document.querySelector('.bg-green-50');
                        if (successMsg) {
                            successMsg.style.transition = 'opacity 0.5s';
                            successMsg.style.opacity = '0';
                            setTimeout(() => successMsg.remove(), 500);
                        }
                    }, 5000);
                @endif
            @endif
            
            // Update preview on page load
            this.updatePreview();
            
            // Live preview - update immediately as user types
            const form = document.querySelector('form');
            if (form) {
                // Listen to all input events (text inputs, textareas)
                form.addEventListener('input', (e) => {
                    // Update immediately for text inputs
                    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
                        this.updatePreview();
                    }
                });
                
                // Listen to change events (for range sliders, selects, etc.)
                form.addEventListener('change', () => {
                    this.updatePreview();
                });
                
                // Also listen to input events on range sliders for real-time updates
                const rangeInputs = form.querySelectorAll('input[type="range"]');
                rangeInputs.forEach(input => {
                    input.addEventListener('input', () => {
                        this.updatePreview();
                    });
                });
            }
        },
        updatePreview() {
            // Get all form values
            const getValue = (id) => {
                const el = document.getElementById(id);
                return el ? el.value : '';
            };
            
            const getNumber = (id, defaultValue) => {
                const val = getValue(id);
                return val ? parseInt(val) : defaultValue;
            };
            
            // Update preview elements
            const subtitle = getValue('printer_subtitle');
            const subtitleEl = document.getElementById('preview-subtitle');
            if (subtitle && subtitleEl) {
                subtitleEl.textContent = subtitle;
                subtitleEl.style.display = 'block';
            } else if (subtitleEl) {
                subtitleEl.style.display = 'none';
            }
            
            // Update font sizes
            document.getElementById('preview-title').style.fontSize = getNumber('printer_title_font_size', 16) + 'px';
            if (subtitleEl) subtitleEl.style.fontSize = getNumber('printer_subtitle_font_size', 16) + 'px';
            document.getElementById('preview-service').style.fontSize = getNumber('printer_service_font_size', 16) + 'px';
            document.getElementById('preview-token').style.fontSize = getNumber('printer_token_font_size', 32) + 'px';
            document.getElementById('preview-location').style.fontSize = getNumber('printer_location_font_size', 16) + 'px';
            document.getElementById('preview-date').style.fontSize = getNumber('printer_date_font_size', 18) + 'px';
            
            // Update wait messages
            const waitAr = getValue('printer_wait_message_ar');
            const waitKu = getValue('printer_wait_message_ku');
            const waitArEl = document.getElementById('preview-wait-ar');
            const waitKuEl = document.getElementById('preview-wait-ku');
            
            if (waitAr && waitArEl) {
                waitArEl.textContent = waitAr;
                waitArEl.style.fontSize = getNumber('printer_wait_message_font_size', 16) + 'px';
                waitArEl.style.display = 'block';
            } else if (waitArEl) {
                waitArEl.style.display = 'none';
            }
            
            if (waitKu && waitKuEl) {
                waitKuEl.textContent = waitKu;
                waitKuEl.style.fontSize = getNumber('printer_wait_message_font_size', 16) + 'px';
                waitKuEl.style.display = 'block';
            } else if (waitKuEl) {
                waitKuEl.style.display = 'none';
            }
            
            // Update website URL
            const websiteUrl = getValue('printer_website_url');
            const websiteEl = document.getElementById('preview-website');
            if (websiteUrl && websiteEl) {
                websiteEl.textContent = websiteUrl;
                websiteEl.style.fontSize = getNumber('printer_website_font_size', 12) + 'px';
                websiteEl.style.display = 'block';
            } else if (websiteEl) {
                websiteEl.style.display = 'none';
            }
            
            // Update powered by text
            const poweredBy = getValue('printer_powered_by_text') || 'Powered by';
            const poweredEl = document.getElementById('preview-powered');
            if (poweredEl) {
                poweredEl.textContent = poweredBy;
                poweredEl.style.fontSize = getNumber('printer_footer_font_size', 10) + 'px';
            }
            
            // Update QR code image
            const qrCodeImage = getValue('printer_qr_code_image');
            const qrImageEl = document.getElementById('preview-qr-code');
            const qrPlaceholderEl = document.getElementById('preview-qr-placeholder');
            
            if (qrCodeImage && qrImageEl && qrPlaceholderEl) {
                // Build the image URL - handle both relative and absolute paths
                let imageUrl = qrCodeImage;
                if (!qrCodeImage.startsWith('http://') && !qrCodeImage.startsWith('https://') && !qrCodeImage.startsWith('/')) {
                    // Relative path, use asset helper equivalent
                    imageUrl = '{{ url("/") }}/' + qrCodeImage.replace(/^\//, '');
                } else if (qrCodeImage.startsWith('/')) {
                    imageUrl = '{{ url("/") }}' + qrCodeImage;
                }
                
                qrImageEl.src = imageUrl;
                qrImageEl.style.display = 'block';
                qrPlaceholderEl.style.display = 'none';
                
                // Handle image load error
                qrImageEl.onerror = function() {
                    this.style.display = 'none';
                    if (qrPlaceholderEl) {
                        qrPlaceholderEl.style.display = 'flex';
                    }
                };
                
                // Handle image load success
                qrImageEl.onload = function() {
                    this.style.display = 'block';
                    if (qrPlaceholderEl) {
                        qrPlaceholderEl.style.display = 'none';
                    }
                };
            } else if (qrImageEl && qrPlaceholderEl) {
                // No image path provided
                qrImageEl.style.display = 'none';
                qrPlaceholderEl.style.display = 'flex';
            }
            
            // Update date dynamically
            const dateEl = document.getElementById('preview-date');
            if (dateEl) {
                const now = new Date();
                const dateStr = now.toISOString().slice(0, 16).replace('T', ' ');
                dateEl.textContent = dateStr;
            }
        }
    }
}
</script>
@endpush
@endsection