@extends('uibuilder::layouts.app')

@section('title', 'Preview Template')

@section('content')
<div class="space-y-6">
    <!-- Page Header -->
    <div class="flex justify-between items-center">
        <div>
            <h2 class="text-3xl font-bold text-gray-900">Preview: {{ $template->name }}</h2>
            <p class="mt-1 text-sm text-gray-500">
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                    {{ $template->component }}
                </span>
                <span class="ml-2 text-gray-400">|</span>
                <span class="ml-2">{{ $template->slug }}</span>
            </p>
        </div>
        <a href="{{ route('ui-builder.templates') }}" 
           class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
            ← Quay lại
        </a>
    </div>

    <!-- Preview Controls -->
    <div class="bg-white shadow rounded-lg p-4">
        <div class="flex items-center justify-between">
            <div class="flex space-x-2">
                <button onclick="setPreview('desktop')" id="btn-desktop"
                        class="preview-btn px-4 py-2 text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                    <svg class="inline-block mr-1 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                    </svg>
                    Desktop
                </button>
                <button onclick="setPreview('tablet')" id="btn-tablet"
                        class="preview-btn px-4 py-2 text-sm font-medium rounded-md text-gray-700 bg-gray-200 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                    <svg class="inline-block mr-1 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                    </svg>
                    Tablet
                </button>
                <button onclick="setPreview('mobile')" id="btn-mobile"
                        class="preview-btn px-4 py-2 text-sm font-medium rounded-md text-gray-700 bg-gray-200 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                    <svg class="inline-block mr-1 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
                    </svg>
                    Mobile
                </button>
            </div>
            <div class="text-sm text-gray-500">
                <span id="preview-size">100%</span>
            </div>
        </div>
    </div>

    <!-- Preview Container -->
    <div class="bg-gray-100 rounded-lg p-4 flex justify-center">
        <div id="preview-wrapper" 
             class="bg-white shadow-2xl rounded-lg overflow-hidden transition-all duration-300 ease-in-out" 
             style="width: 100%; max-width: 100%;">
            <iframe id="preview-frame" 
                    class="w-full border-0" 
                    style="height: 600px; background: white;"></iframe>
        </div>
    </div>

    <!-- Template Info -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- HTML Code -->
        <div class="bg-white shadow rounded-lg p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">HTML Code</h3>
            <pre class="bg-gray-50 border border-gray-200 rounded p-4 overflow-x-auto text-xs"><code>{{ $template->html }}</code></pre>
        </div>

        <!-- CSS Code -->
        <div class="bg-white shadow rounded-lg p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">CSS Code</h3>
            @if($template->css)
                <pre class="bg-gray-50 border border-gray-200 rounded p-4 overflow-x-auto text-xs"><code>{{ $template->css }}</code></pre>
            @else
                <p class="text-sm text-gray-500 italic">Không có CSS tùy chỉnh</p>
            @endif
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Template data
    const templateHtml = `{!! addslashes($template->html) !!}`;
    const templateCss = `{!! addslashes($template->css ?? '') !!}`;
    
    // Initialize preview
    const frame = document.getElementById('preview-frame');
    const wrapper = document.getElementById('preview-wrapper');
    const sizeDisplay = document.getElementById('preview-size');
    
    // Load content into iframe
    function loadPreview() {
        const doc = frame.contentDocument || frame.contentWindow.document;
        const cssStyle = templateCss ? `<style>${templateCss}</style>` : '';
        const content = `
            <!DOCTYPE html>
            <html>
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                ${cssStyle}
                <style>
                    body { 
                        margin: 0; 
                        padding: 20px;
                        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
                    }
                </style>
            </head>
            <body>
                ${templateHtml}
            </body>
            </html>
        `;
        doc.open();
        doc.write(content);
        doc.close();
    }
    
    // Set preview mode
    function setPreview(mode) {
        // Update button states
        document.querySelectorAll('.preview-btn').forEach(btn => {
            btn.classList.remove('bg-blue-600', 'text-white', 'hover:bg-blue-700');
            btn.classList.add('bg-gray-200', 'text-gray-700', 'hover:bg-gray-300');
        });
        
        const activeBtn = document.getElementById(`btn-${mode}`);
        activeBtn.classList.remove('bg-gray-200', 'text-gray-700', 'hover:bg-gray-300');
        activeBtn.classList.add('bg-blue-600', 'text-white', 'hover:bg-blue-700');
        
        // Update preview size
        switch(mode) {
            case 'desktop':
                wrapper.style.width = '100%';
                wrapper.style.maxWidth = '100%';
                sizeDisplay.textContent = '100% (Desktop)';
                break;
            case 'tablet':
                wrapper.style.width = '768px';
                wrapper.style.maxWidth = '768px';
                sizeDisplay.textContent = '768px (Tablet)';
                break;
            case 'mobile':
                wrapper.style.width = '390px';
                wrapper.style.maxWidth = '390px';
                sizeDisplay.textContent = '390px (Mobile)';
                break;
        }
    }
    
    // Initialize on page load
    frame.onload = function() {
        loadPreview();
    };
    
    // Trigger initial load
    frame.src = 'about:blank';
</script>
@endpush
@endsection