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

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

@section('content')
<div class="space-y-6" id="template-builder">
    <!-- Page Header -->
    <div class="flex justify-between items-center">
        <div>
            <h2 class="text-3xl font-bold text-gray-900">Template Builder</h2>
            <p class="mt-1 text-sm text-gray-500">Tạo template mới từ các mẫu có sẵn - Không cần code!</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>

    <!-- Step Indicator -->
    <div class="bg-white shadow rounded-lg p-6">
        <div class="flex items-center justify-between">
            <div class="flex items-center space-x-4 step-item active" data-step="1">
                <div class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-600 text-white font-bold">1</div>
                <div>
                    <p class="font-medium">Chọn Layout</p>
                    <p class="text-sm text-gray-500">Chọn template mẫu</p>
                </div>
            </div>
            <div class="flex-1 h-1 bg-gray-200 mx-4"></div>
            <div class="flex items-center space-x-4 step-item" data-step="2">
                <div class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-300 text-gray-600 font-bold">2</div>
                <div>
                    <p class="font-medium text-gray-400">Cấu hình</p>
                    <p class="text-sm text-gray-400">Nhập thông tin</p>
                </div>
            </div>
            <div class="flex-1 h-1 bg-gray-200 mx-4"></div>
            <div class="flex items-center space-x-4 step-item" data-step="3">
                <div class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-300 text-gray-600 font-bold">3</div>
                <div>
                    <p class="font-medium text-gray-400">Hoàn thành</p>
                    <p class="text-sm text-gray-400">Lưu template</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Step 1: Chọn Layout -->
    <div class="step-content" id="step-1">
        <div class="bg-white shadow rounded-lg p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Chọn Layout Template</h3>
            
            <!-- Component Filter -->
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">Loại Component</label>
                <div class="flex flex-wrap gap-2">
                    <button onclick="filterPresets('all')" class="filter-btn active px-4 py-2 rounded-lg bg-blue-600 text-white text-sm font-medium" data-filter="all">
                        Tất cả
                    </button>
                    @foreach($presets as $component => $items)
                        <button onclick="filterPresets('{{ $component }}')" class="filter-btn px-4 py-2 rounded-lg bg-gray-200 text-gray-700 text-sm font-medium hover:bg-gray-300" data-filter="{{ $component }}">
                            {{ ucfirst($component) }}
                        </button>
                    @endforeach
                </div>
            </div>

            <!-- Presets Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="presets-grid">
                @foreach($presets as $component => $items)
                    @foreach($items as $preset)
                        <div class="preset-card border-2 border-gray-200 rounded-lg p-4 cursor-pointer hover:border-blue-500 hover:shadow-lg transition" 
                             data-component="{{ $component }}"
                             data-slug="{{ $preset['slug'] }}"
                             onclick="selectPreset('{{ $preset['slug'] }}')">
                            <div class="aspect-w-16 aspect-h-9 mb-3 bg-gray-100 rounded overflow-hidden">
                                <img src="{{ $preset['thumbnail'] }}" 
                                     alt="{{ $preset['name'] }}" 
                                     class="w-full h-48 object-cover"
                                     onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                                <div class="w-full h-48 bg-gray-100 rounded flex items-center justify-center" style="display: none;">
                                    <div class="text-center text-gray-500">
                                        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                        </svg>
                                        <p class="mt-2 text-sm">No Preview</p>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <span class="inline-block px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded mb-2">
                                    {{ $component }}
                                </span>
                                <h4 class="font-semibold text-gray-900">{{ $preset['name'] }}</h4>
                                <p class="text-sm text-gray-500 mt-1">{{ $preset['slug'] }}</p>
                            </div>
                        </div>
                    @endforeach
                @endforeach
            </div>
        </div>
    </div>

    <!-- Step 2: Cấu hình -->
    <div class="step-content hidden" id="step-2">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Config Form -->
            <div class="bg-white shadow rounded-lg p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Cấu hình Template</h3>
                
                <form id="config-form" class="space-y-4">
                    <!-- Basic Info -->
                    <div>
                        <label for="template-name" class="block text-sm font-medium text-gray-700">Tên Template *</label>
                        <input type="text" id="template-name" name="name" required
                               class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
                               placeholder="Ví dụ: Footer công ty">
                    </div>

                    <div>
                        <label for="template-slug" class="block text-sm font-medium text-gray-700">Slug *</label>
                        <input type="text" id="template-slug" name="slug" required
                               class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
                               placeholder="footer-cong-ty">
                    </div>

                    <!-- Dynamic Config Fields -->
                    <div id="config-fields" class="space-y-4 border-t pt-4 mt-4">
                        <!-- Fields will be generated here by JavaScript -->
                    </div>

                    <div class="flex items-start pt-4">
                        <div class="flex items-center h-5">
                            <input type="checkbox" id="template-active" name="is_active" checked
                                   class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="template-active" class="font-medium text-gray-700">Hoạt động</label>
                            <p class="text-gray-500">Template sẽ có thể sử dụng ngay</p>
                        </div>
                    </div>
                </form>
            </div>

            <!-- Preview -->
            <div class="bg-white shadow rounded-lg p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-medium text-gray-900">Preview</h3>
                    <div class="flex space-x-2">
                        <button onclick="setPreviewMode('desktop')" class="preview-mode-btn active px-3 py-1 text-sm rounded bg-blue-600 text-white" data-mode="desktop">
                            🖥️ Desktop
                        </button>
                        <button onclick="setPreviewMode('tablet')" class="preview-mode-btn px-3 py-1 text-sm rounded bg-gray-200 text-gray-700" data-mode="tablet">
                            📱 Tablet
                        </button>
                        <button onclick="setPreviewMode('mobile')" class="preview-mode-btn px-3 py-1 text-sm rounded bg-gray-200 text-gray-700" data-mode="mobile">
                            📱 Mobile
                        </button>
                    </div>
                </div>

                <div class="bg-gray-100 rounded p-4 flex justify-center">
                    <div id="preview-wrapper" class="bg-white shadow-lg rounded overflow-hidden transition-all" style="width: 100%; max-width: 100%;">
                        <iframe id="preview-frame" class="w-full border-0" style="height: 500px;"></iframe>
                    </div>
                </div>
            </div>
        </div>

        <!-- Actions -->
        <div class="bg-white shadow rounded-lg p-6">
            <div class="flex justify-between">
                <button type="button" onclick="goToStep(1)" 
                        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
                </button>
                <button type="button" onclick="goToStep(3)" 
                        class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
                    Tiếp tục →
                </button>
            </div>
        </div>
    </div>

    <!-- Step 3: Hoàn thành -->
    <div class="step-content hidden" id="step-3">
        <div class="bg-white shadow rounded-lg p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Xem lại và Lưu</h3>
            
            <div class="space-y-4">
                <div>
                    <h4 class="text-sm font-medium text-gray-700">Tên Template:</h4>
                    <p id="review-name" class="text-gray-900"></p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-700">Slug:</h4>
                    <p id="review-slug" class="text-gray-900"></p>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-gray-700">Component:</h4>
                    <p id="review-component" class="text-gray-900"></p>
                </div>
            </div>

            <div class="mt-6 p-4 bg-blue-50 border border-blue-200 rounded">
                <p class="text-sm text-blue-700">
                    <strong>Lưu ý:</strong> Template sẽ được lưu với HTML, CSS và config schema đã cấu hình.
                    Bạn có thể sửa lại sau khi lưu.
                </p>
            </div>

            <!-- Actions -->
            <div class="flex justify-between mt-6">
                <button type="button" onclick="goToStep(2)" 
                        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
                </button>
                <button type="button" onclick="saveTemplate()" 
                        id="save-btn"
                        class="inline-flex items-center px-6 py-3 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700">
                    💾 Lưu Template
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.step-item.active .w-10 {
    background-color: #2563eb;
}
.step-item.active p {
    color: #1f2937;
}
.preset-card:hover {
    transform: translateY(-2px);
}
.filter-btn.active {
    background-color: #2563eb;
    color: white;
}
.preview-mode-btn.active {
    background-color: #2563eb;
    color: white;
}
</style>
@endpush

@push('scripts')
<!-- Mustache.js for template rendering -->
<script src="https://cdn.jsdelivr.net/npm/mustache@4.2.0/mustache.min.js"></script>

<!-- Template Builder JavaScript -->
<script src="{{ asset('modules/uibuilder/js/template-builder.js') }}"></script>
@endpush