@props([
    'items' => [], // existing items (edit only)
    'additionals' => [] // list of additionals for the selector
])

<div x-show="tab === 'additionals'" class="col-span-2">
    <div class="mb-5 flex items-center gap-3 border-b border-gray-200 pb-4">
        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600">
            <i class="fas fa-list"></i>
        </div>
        <div>
            <h2 class="text-lg font-semibold text-gray-900">Adicionales de la propiedad</h2>
            <p class="text-sm text-gray-500">Agrega características o detalles que complementen la información.</p>
        </div>
    </div>

    <!-- Selector + input + button -->
    <div class="mb-6 rounded-lg border border-gray-200 bg-gray-50 p-4">
        <div class="mb-4 flex items-center gap-2 text-sm font-semibold text-gray-700">
            <i class="fas fa-plus-circle text-blue-600"></i>
            <span>Agregar adicional</span>
        </div>
        <div class="grid grid-cols-1 items-end gap-4 md:grid-cols-12">
            <div class="md:col-span-4">
                <label for="additional_id" class="mb-2 block text-sm font-medium text-gray-700">Tipo de adicional</label>
                <select id="additional_id" class="block w-full rounded-lg border border-gray-300 bg-white p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-2 focus:ring-blue-500">
                <option value="">-- Seleccionar adicional --</option>
                @foreach($additionals as $add)
                    <option value="{{ $add->id }}">{{ $add->title }}</option>
                @endforeach
                </select>
            </div>
            <div class="md:col-span-6">
                <label for="item_title" class="mb-2 block text-sm font-medium text-gray-700">Detalle</label>
                <input type="text" id="item_title" placeholder="Ejemplo: capacidad para 4 personas" class="block w-full rounded-lg border border-gray-300 bg-white p-2.5 text-sm text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500">
            </div>
            <div class="md:col-span-2">
            <button type="button" id="add-item"
                class="flex w-full items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400">
                <i class="fas fa-plus"></i> Agregar
            </button>
            </div>
        </div>
    </div>

    <!-- Dynamic table -->
    <div class="overflow-hidden rounded-lg border border-gray-200">
        <div class="flex items-center justify-between bg-white px-4 py-3">
            <h3 class="text-sm font-semibold text-gray-800"><i class="fas fa-table mr-2 text-blue-600"></i>Detalles agregados</h3>
            <span class="text-xs text-gray-500">Se guardan al actualizar la propiedad</span>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full">
            <thead class="border-y border-gray-200 bg-gray-50">
                <tr>
                    <th class="px-4 py-2 text-left text-xs font-semibold uppercase tracking-wider text-black -500">Adicional</th>
                    <th class="px-4 py-2 text-left text-xs font-semibold uppercase tracking-wider text-black -500">Detalle</th>
                    <th class="px-4 py-2 text-center text-xs font-semibold uppercase tracking-wider text-black -500">Acciones</th>
                </tr>
            </thead>
            <tbody id="items-table" class="divide-y divide-gray-200">
                @foreach($items as $index => $item)
                    <tr class="odd:bg-white even:bg-gray-50 hover:bg-blue-50 transition-colors">
                        <td class="px-4 py-2 text-sm font-medium text-gray-900">{{ $item->additional->title }}</td>
                        <td class="px-4 py-2 text-sm text-gray-600">{{ $item->title }}</td>
                        <td class="px-4 py-2 text-center">
                            <button type="button"
                                class="delete-row inline-flex h-9 w-9 items-center justify-center rounded-lg bg-red-100 text-red-700 transition hover:bg-red-600 hover:text-white focus:outline-none focus:ring-2 focus:ring-red-400"
                                title="Eliminar adicional"
                                aria-label="Eliminar adicional">
                                <i class="fas fa-times-circle"></i>
                            </button>
                        </td>
                        <input type="hidden" name="items[{{ $index }}][additional_id]" value="{{ $item->additional_id }}">
                        <input type="hidden" name="items[{{ $index }}][title]" value="{{ $item->title }}">
                    </tr>
                @endforeach
            </tbody>
            </table>
        </div>
    </div>
</div>