@props(['mode' => 'user', 'form' => null])

<div class="tw-wrapper">
    <div class="space-y-8">
        {{-- Contenedor Principal de Secciones --}}
        <div
            class="bg-gray-50/30 dark:bg-gray-800 rounded-2xl border border-gray-100 dark:border-gray-700 p-6 mb-8 shadow-sm relative transition-colors duration-300">

            {{-- Header de la sección principal --}}
            <div class="mb-10">
                <div class="flex items-center gap-4">
                    <h2 class="text-xl font-black uppercase tracking-widest text-main-two dark:text-main-one">
                        {{ __('Additional Sections') }}
                    </h2>
                    <div class="h-[1px] flex-1 bg-gray-100 dark:bg-gray-700"></div>
                </div>
                <p class="text-sm text-gray-500 dark:text-gray-400 mt-2 italic">
                    {{ __('Create custom sections to specify extra technical details and features.') }}
                </p>
            </div>

            {{-- Loop de Secciones Personalizadas --}}
            @foreach (collect($this->form->customSections) as $sectionIndex => $section)
                <div
                    class="bg-white/50  dark:bg-gray-900/40 rounded-2xl border-l-4 border-l-main-two dark:border-l-main-one border-y border-r border-gray-100 dark:border-gray-700 p-6 mb-8 shadow-sm relative animate-in fade-in zoom-in-95 duration-300">

                    {{-- Header de la Sub-sección --}}
                    <div
                        class="flex items-center justify-between mb-6 border-b border-gray-100 dark:border-gray-700 pb-4">
                        <div class="flex-1 mr-4">
                            @if ($mode === 'admin')
                                <x-input wire:model="form.customSections.{{ $sectionIndex }}.title"
                                    placeholder="{{ __('Section Title') }}"
                                    class="text-lg font-bold text-main-two dark:text-main-one border-none focus:ring-0 p-0 bg-transparent" />
                            @else
                                <h2 class="text-lg font-bold text-main-two dark:text-main-one">
                                    {{ $section['title'] ?? __('Technical Details') }}
                                </h2>
                            @endif
                        </div>

                        @if ($mode === 'admin')
                            <div class="flex items-center gap-2">
                                <x-button wire:click="addCustomSectionField({{ $sectionIndex }})" icon="plus" sm
                                    secondary label="{{ __('Add Field') }}" class="rounded-lg font-bold shadow-sm" />
                                <x-button wire:click="confirmRemoveCustomSection({{ $sectionIndex }})" icon="trash" sm
                                    negative flat class="hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg" />
                            </div>
                        @endif
                    </div>

                    {{-- Grid de Campos (Fields) --}}
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        @foreach ($section['fields'] ?? [] as $fieldIndex => $field)
                            <div
                                class="flex items-center gap-3 w-full group animate-in fade-in slide-in-from-left-2 duration-300 hover:bg-gray-50 dark:hover:bg-gray-800/50 p-2 rounded-xl transition-all">

                                <div class="w-1/3">
                                    <x-input
                                        wire:model="form.customSections.{{ $sectionIndex }}.fields.{{ $fieldIndex }}.key"
                                        placeholder="{{ __('Feature') }}" :disabled="$mode !== 'admin'" class="text-sm" />
                                </div>

                                <div class="flex-1">
                                    <x-input
                                        wire:model="form.customSections.{{ $sectionIndex }}.fields.{{ $fieldIndex }}.value"
                                        placeholder="{{ __('Value') }}" :disabled="$mode !== 'admin'"
                                        class="text-sm font-semibold" />
                                </div>

                                @if ($mode === 'admin')
                                    <x-button
                                        wire:click="confirmRemoveCustomSectionField({{ $sectionIndex }}, {{ $fieldIndex }})"
                                        icon="trash" sm negative flat
                                        class="opacity-0 group-hover:opacity-100 transition-opacity" />
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            @endforeach

            {{-- Botón para crear nueva sección (Solo Admin) --}}
            @if ($mode === 'admin')
                <div class="flex justify-center pt-4">
                    <x-button wire:click="addCustomSection" label="{{ __('Create New Section') }}" icon="puzzle-piece"
                        primary md outline
                        class="px-10 py-3 rounded-xl border-2 shadow-sm font-black active:scale-95 transition-all uppercase text-xs tracking-widest" />
                </div>
            @endif
        </div>
    </div>
</div>