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

@section('title', isset($config) ? 'Sửa Config' : 'Tạo Config')

@section('content')
<div class="space-y-6">
    <!-- Page Header -->
    <div>
        <h2 class="text-3xl font-bold text-gray-900">{{ isset($config) ? 'Sửa Config' : 'Tạo Config mới' }}</h2>
        <p class="mt-1 text-sm text-gray-500">{{ isset($config) ? 'Cập nhật mapping tenant/domain với template' : 'Tạo mapping mới giữa tenant/domain và template' }}</p>
    </div>

    <!-- Form -->
    <form method="POST" 
          action="{{ isset($config) ? route('ui-builder.configs.update', $config->id) : route('ui-builder.configs.store') }}" 
          class="space-y-6">
        @csrf
        @if(isset($config))
            @method('PUT')
        @endif

        <div class="bg-white shadow rounded-lg p-6 space-y-6">
            <!-- Tenant -->
            <div>
                <label for="tenant_id" class="block text-sm font-medium text-gray-700">Tenant *</label>
                <select name="tenant_id" id="tenant_id" 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">
                    <option value="">-- Chọn tenant --</option>
                    @foreach($tenants as $tenant)
                        <option value="{{ $tenant->id }}" {{ old('tenant_id', $config->tenant_id ?? '') == $tenant->id ? 'selected' : '' }}>
                            {{ $tenant->name }} ({{ $tenant->code }})
                        </option>
                    @endforeach
                </select>
                @error('tenant_id')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Domain -->
            <div>
                <label for="domain_id" class="block text-sm font-medium text-gray-700">Domain *</label>
                <select name="domain_id" id="domain_id" 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">
                    <option value="">-- Chọn domain --</option>
                    @foreach($domains as $domain)
                        <option value="{{ $domain->id }}" {{ old('domain_id', $config->domain_id ?? '') == $domain->id ? 'selected' : '' }}>
                            {{ $domain->name }}
                        </option>
                    @endforeach
                </select>
                @error('domain_id')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Component -->
            <div>
                <label for="component" class="block text-sm font-medium text-gray-700">Component *</label>
                <select name="component" id="component" 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">
                    <option value="">-- Chọn component --</option>
                    @foreach($components as $comp)
                        <option value="{{ $comp }}" {{ old('component', $config->component ?? '') == $comp ? 'selected' : '' }}>
                            {{ $comp }}
                        </option>
                    @endforeach
                </select>
                <p class="mt-1 text-sm text-gray-500">Mỗi cặp tenant/domain/component chỉ có thể có 1 config</p>
                @error('component')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Template -->
            <div>
                <label for="template_id" class="block text-sm font-medium text-gray-700">Template *</label>
                <select name="template_id" id="template_id" 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">
                    <option value="">-- Chọn template --</option>
                    @foreach($templates as $template)
                        <option value="{{ $template->id }}" 
                                data-component="{{ $template->component }}"
                                {{ old('template_id', $config->template_id ?? '') == $template->id ? 'selected' : '' }}>
                            {{ $template->name }} ({{ $template->component }})
                        </option>
                    @endforeach
                </select>
                @error('template_id')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Config JSON -->
            <div>
                <label for="config" class="block text-sm font-medium text-gray-700">Config JSON (Tùy chọn)</label>
                <textarea name="config" id="config" rows="8"
                          class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm font-mono"
                          placeholder='{"title": "My Title", "link": "https://example.com", "color": "#FF0000"}'>{{ old('config', isset($config) ? json_encode($config->config, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) : '') }}</textarea>
                <p class="mt-1 text-sm text-gray-500">Nhập dữ liệu cấu hình dạng JSON (text, link, màu sắc, ...)</p>
                @error('config')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Is Active -->
            <div class="flex items-start">
                <div class="flex items-center h-5">
                    <input type="checkbox" name="is_active" id="is_active" value="1"
                           {{ old('is_active', $config->is_active ?? true) ? '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="is_active" class="font-medium text-gray-700">Hoạt động</label>
                    <p class="text-gray-500">Config này sẽ được sử dụng cho API render</p>
                </div>
            </div>
        </div>

        <!-- Actions -->
        <div class="flex justify-end space-x-3">
            <a href="{{ route('ui-builder.configs') }}" 
               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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                Hủy
            </a>
            <button type="submit" 
                    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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                {{ isset($config) ? 'Cập nhật' : 'Tạo mới' }}
            </button>
        </div>
    </form>
</div>

@push('scripts')
<script>
    // Filter templates by component
    const componentSelect = document.getElementById('component');
    const templateSelect = document.getElementById('template_id');
    const allTemplates = Array.from(templateSelect.options).slice(1); // Skip first "-- Chọn template --"
    
    componentSelect.addEventListener('change', function() {
        const selectedComponent = this.value;
        
        // Clear current options except first one
        templateSelect.innerHTML = '<option value="">-- Chọn template --</option>';
        
        if (selectedComponent) {
            // Add only matching templates
            allTemplates.forEach(option => {
                if (option.dataset.component === selectedComponent) {
                    templateSelect.appendChild(option.cloneNode(true));
                }
            });
        } else {
            // Add all templates
            allTemplates.forEach(option => {
                templateSelect.appendChild(option.cloneNode(true));
            });
        }
    });
    
    // Validate JSON
    const configTextarea = document.getElementById('config');
    configTextarea.addEventListener('blur', function() {
        if (this.value.trim()) {
            try {
                JSON.parse(this.value);
                this.classList.remove('border-red-300');
            } catch (e) {
                this.classList.add('border-red-300');
                alert('JSON không hợp lệ: ' + e.message);
            }
        }
    });
</script>
@endpush
@endsection