@extends('layouts.admin')

@section('content')
<div class="px-6 py-8">
    <x-app-tabs active="bundles" />

    <div class="flex items-center gap-3 mb-6">
        <a href="{{ route('admin.app.ui-bundles') }}" class="btn-luxury-secondary">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" /></svg>
            {{ __('Back') }}
        </a>
        <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-200">{{ __('Content Settings') }}：{{ $bundle->name }}</h4>
    </div>

    <form action="{{ route('admin.app.ui-bundles.content.update', $bundle) }}" method="POST">
        @csrf @method('PUT')

        @php
            $grouped = collect($parts)->groupBy('group', true);
            $groupDefs = config('ui_parts.groups', []);
            // 群組順序：先照 config 定義，未定義者排最後，且只留實際有部位的群組
            $orderedGroups = collect($groupDefs)->keys()
                ->merge($grouped->keys())->unique()
                ->filter(fn($g) => $grouped->has($g))->values();
            $firstGroup = true;
        @endphp

        @foreach($orderedGroups as $groupKey)
            @if(!$firstGroup)
                <hr class="my-8 border-t border-gray-200 dark:border-gray-700">
            @endif
            @php $firstGroup = false; @endphp

            <h4 class="text-base font-semibold text-gray-800 dark:text-gray-200 mb-3">{{ $groupDefs[$groupKey] ?? $groupKey }}</h4>
            <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
                @foreach($grouped[$groupKey] as $key => $part)
                    @php $item = $itemsByPart->get($key); $partType = $part['type'] ?? 'image'; @endphp

                    @if($partType === 'color')
                        {{-- 色彩型（C 底色 / T 文字色）：勾選套用 + 色票 --}}
                        @php $currentColor = $item->color_value ?? ''; @endphp
                        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700 p-4"
                            x-data="{ enabled: {{ $currentColor ? 'true' : 'false' }}, color: '{{ $currentColor ?: '#000000' }}' }">
                            <label class="block text-sm font-semibold text-gray-800 dark:text-gray-100 mb-2">{{ $part['label'] }}</label>
                            <label class="inline-flex items-center gap-2 mb-3 text-sm text-gray-600 dark:text-gray-300">
                                <input type="checkbox" name="parts_enabled[{{ $key }}]" value="1" x-model="enabled" class="rounded text-cyan-600 focus:ring-cyan-500">
                                {{ __('Apply') }}
                            </label>
                            <div class="flex items-center gap-3" :class="enabled ? '' : 'opacity-40 pointer-events-none'">
                                <input type="color" name="parts_color[{{ $key }}]" x-model="color" class="h-10 w-14 rounded border border-gray-300 dark:border-gray-600 bg-transparent cursor-pointer">
                                <span class="text-sm font-mono text-gray-500 dark:text-gray-400" x-text="color.toUpperCase()"></span>
                            </div>
                        </div>
                    @else
                        {{-- 圖片型：選對應類別的 UI 元素 --}}
                        @php
                            $currentId = optional($item)->ui_element_id;
                            $currentThumb = optional(optional($item)->element)->image_url ?? '';
                        @endphp
                        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700 p-4" x-data="{ thumb: @js($currentThumb) }">
                            <label class="block text-sm font-semibold text-gray-800 dark:text-gray-100 mb-2">
                                {{ $part['label'] }}
                                @if($part['width'] ?? null)<span class="text-xs font-normal text-gray-400">（{{ $part['width'] }}x{{ $part['height'] }}）</span>@endif
                            </label>
                            <select name="parts[{{ $key }}]"
                                @change="thumb = ($event.target.selectedOptions[0]?.dataset.thumb) || ''"
                                class="w-full px-3 py-2 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 border rounded-md text-gray-900 dark:text-gray-200 text-sm focus:ring-2 focus:ring-cyan-500">
                                <option value="">{{ __('Not set') }}</option>
                                @foreach($elementsByPart[$key] as $element)
                                    <option value="{{ $element->id }}" data-thumb="{{ $element->image_url }}" {{ (string)$currentId === (string)$element->id ? 'selected' : '' }}>
                                        {{ $element->name }}
                                    </option>
                                @endforeach
                            </select>
                            <div class="mt-3">
                                <img x-show="thumb" x-cloak :src="thumb" class="h-28 w-auto max-w-full object-contain rounded border border-gray-200 dark:border-gray-700 bg-gray-50">
                                <p x-show="!thumb" x-cloak class="text-xs text-gray-400">{{ __('No image selected') }}</p>
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
        @endforeach

        <div class="mt-6 flex justify-end">
            <button type="submit" class="btn-luxury-primary">{{ __('Save') }}</button>
        </div>
    </form>
</div>
@endsection