@props([
    'name',
    'rows' => [],
    'columns' => [],
    'addLabel' => 'Tambah baris',
])

{{--
    A minimal Alpine repeater. Each column is [key, label, type, placeholder?].
    Rows are indexed by position so they post as name[0][key], name[1][key]…
--}}
<div x-data="{
        rows: {{ Js::from($rows ?: [array_fill_keys(array_column($columns, 0), null)]) }},
        add() { this.rows.push({{ Js::from(array_fill_keys(array_column($columns, 0), null)) }}); },
        remove(index) { this.rows.splice(index, 1); if (this.rows.length === 0) this.add(); },
     }">
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="text-left text-xs tracking-wide text-slate-500 uppercase">
                    @foreach ($columns as [$key, $label])
                        <th class="pb-2 pr-3 font-medium">{{ $label }}</th>
                    @endforeach
                    <th class="w-8 pb-2"></th>
                </tr>
            </thead>
            <tbody>
                <template x-for="(row, index) in rows" :key="index">
                    <tr>
                        @foreach ($columns as $column)
                            @php [$key, $label, $type] = [$column[0], $column[1], $column[2] ?? 'text']; @endphp
                            <td class="py-1 pr-3">
                                <input
                                    :type="'{{ $type }}'"
                                    @if ($type === 'number') step="any" min="0" @endif
                                    :name="`{{ $name }}[${index}][{{ $key }}]`"
                                    x-model="row.{{ $key }}"
                                    placeholder="{{ $column[3] ?? $label }}"
                                    class="field-input">
                            </td>
                        @endforeach
                        <td class="py-1">
                            <button type="button" x-on:click="remove(index)"
                                    class="rounded-lg p-1.5 text-slate-400 transition hover:bg-rose-50 hover:text-rose-600"
                                    aria-label="Buang baris">
                                <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M6 18L18 6M6 6l12 12"/></svg>
                            </button>
                        </td>
                    </tr>
                </template>
            </tbody>
        </table>
    </div>

    <button type="button" x-on:click="add()" class="btn-secondary mt-3">{{ $addLabel }}</button>
</div>