import React from 'react' import { Head, useForm } from '@inertiajs/react' import { useModalState } from '@/hooks' import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout' import Button from '@/Components/Button' import CustomerSelectionModal from './CustomerSelectionModal' import FormInput from '@/Components/FormInput' import { HiXCircle } from 'react-icons/hi2' export default function Setting(props) { const { data, setData, post, processing, errors } = useForm({ items: [], }) const customerSelectionModal = useModalState() const addItem = (customer) => { const isExists = data.items.find((i) => i.customer.id === customer.id) if (!isExists) { let items = data.items.concat({ customer: customer, customer_id: customer.id, point: 0, description: '', }) setData('items', items) } } const removeItem = (index) => { let items = data.items.filter((_, i) => i !== index) setData('items', items) } const handleChangeValue = (name, value, index) => { setData( 'items', data.items.map((item, i) => { if (i === index) { item[name] = value } return item }) ) } const handleSubmit = () => { post(route('customer-point.store')) } return (

Point

{data.items.map((item, index) => ( ))}

Customer	Point (- / +)	Description
{item.customer.name} ({' '} {item.customer.code} )	handleChangeValue( 'point', e.target.value, index ) } />	handleChangeValue( 'description', e.target.value, index ) } />	removeItem(index) } />

) }