@props(['showStaffExtras' => false])

<div class="card border shadow-none mb-4">
    <div class="card-body">
        <div class="d-flex align-items-center gap-2 mb-1">
            <span class="badge bg-label-primary rounded-2 p-2 lh-1"><i class="ti tabler-stack-2 ti-sm"></i></span>
            <h6 class="mb-0 fw-bold text-uppercase text-primary">{{ __('Additional sections') }}</h6>
        </div>
        <p class="text-muted small mb-4 ms-1">
            {{ __('Create custom sections to specify extra technical details and features.') }}
        </p>

        {{-- Custom sections loop --}}
        @foreach (collect($this->form->customSections) as $sectionIndex => $section)
            <div class="border rounded border-start border-primary border-3 p-3 mb-4">
                <div class="d-flex align-items-center justify-content-between gap-2 mb-3">
                    <div class="flex-grow-1">
                        @if ($showStaffExtras)
                            <input type="text" class="form-control fw-bold"
                                wire:model="form.customSections.{{ $sectionIndex }}.title"
                                placeholder="{{ __('Section title') }}">
                        @else
                            <h6 class="mb-0 fw-bold text-primary">
                                {{ $section['title'] ?? __('Technical details') }}
                            </h6>
                        @endif
                    </div>

                    @if ($showStaffExtras)
                        <div class="d-flex align-items-center gap-2 flex-shrink-0">
                            <button type="button" class="btn btn-sm btn-label-primary"
                                wire:click="addCustomSectionField({{ $sectionIndex }})">
                                <i class="ti tabler-plus me-1"></i>{{ __('Add field') }}
                            </button>
                            <button type="button" class="btn btn-icon btn-sm btn-text-danger"
                                wire:click="confirmRemoveCustomSection({{ $sectionIndex }})"
                                title="{{ __('Delete section') }}">
                                <i class="ti tabler-trash"></i>
                            </button>
                        </div>
                    @endif
                </div>

                <div class="row g-3">
                    @foreach ($section['fields'] ?? [] as $fieldIndex => $field)
                        <div class="col-md-6">
                            <div class="d-flex align-items-center gap-2">
                                <input type="text" class="form-control"
                                    wire:model="form.customSections.{{ $sectionIndex }}.fields.{{ $fieldIndex }}.key"
                                    placeholder="{{ __('Feature') }}" @disabled(! $showStaffExtras)>
                                <input type="text" class="form-control fw-semibold"
                                    wire:model="form.customSections.{{ $sectionIndex }}.fields.{{ $fieldIndex }}.value"
                                    placeholder="{{ __('Value') }}" @disabled(! $showStaffExtras)>
                                @if ($showStaffExtras)
                                    <button type="button" class="btn btn-icon btn-sm btn-text-danger flex-shrink-0"
                                        wire:click="confirmRemoveCustomSectionField({{ $sectionIndex }}, {{ $fieldIndex }})"
                                        title="{{ __('Delete field') }}">
                                        <i class="ti tabler-trash"></i>
                                    </button>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach

        @if ($showStaffExtras)
            <div class="text-center pt-2">
                <button type="button" class="btn btn-outline-primary" wire:click="addCustomSection">
                    <i class="ti tabler-puzzle me-1"></i>{{ __('Create new section') }}
                </button>
            </div>
        @endif
    </div>
</div>