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

@section('title', 'Create New Structure')

@section('content')
<div class="container mx-auto px-4 py-8 max-w-6xl">
    <div class="mb-6">
        <h1 class="text-2xl font-bold mb-2">Create New Structure</h1>
        <p class="text-gray-600">Choose a component type to start building</p>
    </div>

    <form method="GET" action="{{ route('ui-builder.structures.edit', ['id' => 'new']) }}">
        <!-- Component Type -->
        <div class="bg-white rounded-lg shadow p-6 mb-6">
            <h2 class="text-lg font-semibold mb-4">Component Type</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-6">
                <label class="component-option">
                    <input type="radio" name="component" value="footer" required>
                    <div class="option-card">
                        <div class="option-icon">🦶</div>
                        <div class="option-title">Footer</div>
                        <div class="option-desc">Page footer with links, social, newsletter</div>
                    </div>
                </label>

                <label class="component-option">
                    <input type="radio" name="component" value="header" required>
                    <div class="option-card">
                        <div class="option-icon">📋</div>
                        <div class="option-title">Header</div>
                        <div class="option-desc">Top navigation with logo and menu</div>
                    </div>
                </label>

                <label class="component-option">
                    <input type="radio" name="component" value="banner" required>
                    <div class="option-card">
                        <div class="option-icon">🎨</div>
                        <div class="option-title">Banner</div>
                        <div class="option-desc">Hero banner with image and CTA</div>
                    </div>
                </label>
            </div>
        </div>

        <!-- Structure Info -->
        <div class="bg-white rounded-lg shadow p-6 mb-6">
            <h2 class="text-lg font-semibold mb-4">Structure Information</h2>
            
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        Name *
                    </label>
                    <input 
                        type="text" 
                        name="name" 
                        required
                        class="form-input w-full"
                        placeholder="My Footer"
                    />
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        Slug *
                    </label>
                    <input 
                        type="text" 
                        name="slug" 
                        required
                        class="form-input w-full"
                        placeholder="my-footer"
                    />
                    <p class="mt-1 text-sm text-gray-500">
                        Unique identifier (lowercase, no spaces)
                    </p>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        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 }}">
                                {{ $tenant->name }} ({{ $tenant->code }})
                            </option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        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 }}">
                                {{ $domain->name }}
                            </option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-sm text-gray-500">
                        Domain áp dụng cho structure này
                    </p>
                </div>
            </div>
        </div>

        <!-- Actions -->
        <div class="flex justify-between">
            <a href="{{ route('ui-builder.structures.index') }}" class="btn btn-outline">
                ← Back to List
            </a>
            <button type="submit" class="btn btn-primary">
                Create Structure →
            </button>
        </div>
    </form>
</div>

<style>
.component-option {
    cursor: pointer;
}

.component-option input[type="radio"] {
    display: none;
}

.option-card {
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    transition: all 0.2s;
    height: 100%;
    min-height: 200px;
}

.component-option:hover .option-card {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.component-option input[type="radio"]:checked + .option-card {
    border-color: #3b82f6;
    background: #eff6ff;
}

.option-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.option-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #1f2937;
}

.option-desc {
    font-size: 16px;
    color: #6b7280;
    line-height: 1.5;
}
</style>
@endsection