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

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

@section('content')
<div class="space-y-6">
    <!-- Page Header -->
    <div>
        <h2 class="text-3xl font-bold text-gray-900">{{ isset($template) ? 'Sửa Template' : 'Tạo Template mới' }}</h2>
        <p class="mt-1 text-sm text-gray-500">{{ isset($template) ? 'Cập nhật thông tin template' : 'Nhập thông tin template mới' }}</p>
    </div>

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

        <div class="bg-white shadow rounded-lg p-6 space-y-6">
            <!-- 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>
                    <option value="footer" {{ old('component', $template->component ?? '') == 'footer' ? 'selected' : '' }}>Footer</option>
                    <option value="header" {{ old('component', $template->component ?? '') == 'header' ? 'selected' : '' }}>Header</option>
                    <option value="banner" {{ old('component', $template->component ?? '') == 'banner' ? 'selected' : '' }}>Banner</option>
                    <option value="landing" {{ old('component', $template->component ?? '') == 'landing' ? 'selected' : '' }}>Landing</option>
                    <option value="sidebar" {{ old('component', $template->component ?? '') == 'sidebar' ? 'selected' : '' }}>Sidebar</option>
                </select>
                @error('component')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Name -->
            <div>
                <label for="name" class="block text-sm font-medium text-gray-700">Tên Template *</label>
                <input type="text" name="name" id="name" required
                       value="{{ old('name', $template->name ?? '') }}"
                       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 mặc định">
                @error('name')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Slug -->
            <div>
                <label for="slug" class="block text-sm font-medium text-gray-700">Slug *</label>
                <input type="text" name="slug" id="slug" required
                       value="{{ old('slug', $template->slug ?? '') }}"
                       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-default">
                <p class="mt-1 text-sm text-gray-500">Slug phải unique trong mỗi component</p>
                @error('slug')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- HTML -->
            <div>
                <label for="html" class="block text-sm font-medium text-gray-700">HTML Template *</label>
                <textarea name="html" id="html" rows="10" 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 font-mono"
                          placeholder="<div>...</div>">{{ old('html', $template->html ?? '') }}</textarea>
                @error('html')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- CSS -->
            <div>
                <label for="css" class="block text-sm font-medium text-gray-700">CSS (Tùy chọn)</label>
                <textarea name="css" id="css" rows="6"
                          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=".my-class { color: red; }">{{ old('css', $template->css ?? '') }}</textarea>
                @error('css')
                    <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', $template->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">Template này sẽ có thể sử dụng được</p>
                </div>
            </div>
        </div>

        <!-- Actions -->
        <div class="flex justify-end space-x-3">
            <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 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($template) ? 'Cập nhật' : 'Tạo mới' }}
            </button>
        </div>
    </form>
</div>
@endsection