@php
    $fieldName = $field;
    $existingData = old("{$fieldName}_items", $data ?? []);
    if (!is_array($existingData)) {
        $existingData = [];
    }
@endphp

<div class="card border-0 bg-light p-3" x-data="treeInput('{{ $fieldName }}', {{ json_encode($existingData) }})">
    <label class="form-label fw-semibold">{{ $label }}</label>

    {{-- Daftar Pohon yang sudah diinput --}}
    <div class="mb-3">
        <template x-if="items.length > 0">
            <div class="list-group list-group-flush">
                <template x-for="(item, index) in items" :key="index">
                    <div class="list-group-item d-flex justify-content-between align-items-center p-2 mb-2 border rounded"
                         style="background-color:#fff;">
                        <div>
                            <div class="fw-semibold" x-text="item.nama" style="font-size:.9rem;"></div>
                            <div class="text-muted" x-text="item.jumlah + ' pohon'" style="font-size:.8rem;"></div>
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-danger"
                                @click="removeItem(index)">
                            <i class="bi bi-trash"></i>
                        </button>
                    </div>
                </template>
            </div>
        </template>
        <template x-if="items.length === 0">
            <div class="text-muted text-center py-2" style="font-size:.85rem;">
                Belum ada data. Tambahkan dengan form di bawah.
            </div>
        </template>
    </div>

    {{-- Form Input Baru --}}
    <div class="border-top pt-3">
        <div class="row g-2 mb-2">
            <div class="col-8">
                <input type="text" x-model="newItem.nama"
                       class="form-control form-control-sm"
                       placeholder="Nama pohon (cth: Pisang, Karet, Kelapa)">
            </div>
            <div class="col-4">
                <input type="number" x-model.number="newItem.jumlah"
                       class="form-control form-control-sm"
                       placeholder="Jumlah" min="0">
            </div>
        </div>
        <button type="button" @click="addItem()"
                class="btn btn-sm btn-primary w-100">
            <i class="bi bi-plus-lg me-1"></i>Tambah
        </button>
    </div>

    {{-- Hidden inputs untuk submit --}}
    <template x-for="(item, index) in items" :key="index">
        <input type="hidden" :name="'{{ $fieldName }}_items[' + index + '][nama]'" :value="item.nama">
        <input type="hidden" :name="'{{ $fieldName }}_items[' + index + '][jumlah]'" :value="item.jumlah">
    </template>

    @error("{$fieldName}_items")
        <div class="text-danger mt-2" style="font-size:.875rem;">{{ $message }}</div>
    @enderror
</div>

<script>
function treeInput(fieldName, initialData) {
    return {
        items: initialData || [],
        newItem: { nama: '', jumlah: '' },
        addItem() {
            if (!this.newItem.nama || !this.newItem.jumlah) {
                alert('Nama pohon dan jumlah harus diisi');
                return;
            }
            this.items.push({
                nama: this.newItem.nama,
                jumlah: parseInt(this.newItem.jumlah)
            });
            this.newItem = { nama: '', jumlah: '' };
        },
        removeItem(index) {
            this.items.splice(index, 1);
        }
    };
}
</script>